Dynamic image loading from array

Question

I'm creating a gallery page that has 4 columns. Each column has its own unique 3d perspective on it to create a sense of depth. Now, I have to be able to have a responsive page where columns drop off but all the images will have to be displayed.

This is what I have so far... 1)Define array of all images 2)Define how many columns are currently visible 3)Splice main array into smaller arrays based on column count 4)Display news arrays in proper columns(same count for each column)

So I've gone and almost got it all figured out myself. I will update with my final code. THE CURRENT PROBLEM I NEED HELP WITH IS splitting the array into many smaller arrays. I can get one splice from it but I'm not sure how to get all the splices I need and store them appropriately.

     $(document).ready(function(){

    var colCount;
    var imgListSlice;

    var lcol = document.getElementById('lcol')
    var lmcol = document.getElementById('lmcol')
    var rmcol = document.getElementById('rmcol')
    var rcol = document.getElementById('rcol')

    var colList = [
        lcol,
        lmcol,
        rmcol,
        rcol
    ]


    var imgList = [
        '<img src="../img/eggsecution.jpg">',
        '<img src="../img/packagingBox.jpg">',
        '<img src="../img/mnm.jpg">',
        '<img src="../img/magazineadspread.jpg">',
        '<img src="../img/eatyourheartout.jpg">',
        '<img src="../img/bookcover.jpg">',
        '<img src="../img/apple.jpg">',
        '<img src="../img/magazineadspread2.jpg">'
    ]

    $(window).on("resize", function() {

        if (window.matchMedia("(max-width: 1024px)").matches) {

            colCount = 3
            colFill();

        } 

        if (window.matchMedia("(max-width: 720px)").matches) {

            colCount = 1
            colFill();

        } 

    }).resize();

    function clearCol(){
        for (var i = 0; i < colList.length; i++) {      
            colList[i].innerHTML = "";
        };
    }

    function imgSlice(){

        var slicePosition = Math.ceil(imgList.length / colCount);

        while(imgList.length) {
            imgListSlice = imgList.slice(0,slicePosition)
            console.log(''+imgListSlice+'');
            break;
        }
    }

    function loadSlice(){
        lcol.innerHTML = ''+imgListSlice+'';
        console.log(''+imgListSlice+'');
    }

    function colFill(){
        clearCol();
        imgSlice();
        loadSlice();
    }

Welcome to the Treehouse Community

Looking to learn something new?

Michael Paccione

Michael Paccione

Dynamic image loading from array

Hugo Paz

Hugo Paz

Michael Paccione

Michael Paccione