瀑布流布局

function page(n, s) {
            var ideaType = <%=ideaType%>;
            parent.window.document.getElementById("mainFrame").src = "${ctxf}/trend/idea/ideaList?&ideaType="+ ideaType+ "&pageNo=" + n + "&pageSize=" + s ;
     } 
     function down(obj,id){
        var pgcUrl = "<%=request.getHeader("Referer")%>";
        var href = "${ctxf}/trend/idea/download/"+encodeBase64(""+id)+"?pgcUrl="+pgcUrl;
        window.open(href);
    }
            var box = document.getElementById('box');
            var items = box.children;
            // 定义每一列之间的间隙 为10像素
            var gap = 20;
                // 封装成一个函数
            function waterFall() {
                    var itemWidth = items[0].offsetWidth;
                    var columns = 5;
                    var arr = [];
                    for (var i = 0; i < items.length; i++) {      
                        if (i < columns) {
                            items[i].style.top = 0;
                            items[i].style.left = (itemWidth + gap) * i + 'px';
                            arr.push(items[i].offsetHeight);
                        } else {
                            var minHeight = arr[0];
                            var index = 0;
                            for (var j = 0; j < arr.length; j++) {
                                if (minHeight > arr[j]) {
                                    minHeight = arr[j];
                                    index = j;
                                }
                            }     
                            items[i].style.top = arr[index] + gap + 'px';
                            items[i].style.left = items[index].offsetLeft + 'px';
                            arr[index] = arr[index] + items[i].offsetHeight + gap;
                        }
                    }
                    var max = Math.max.apply(null, arr);
                    box.style.height = max  + 20 +  "px";
                    document.getElementById('page').style.display = "flex";
                    document.getElementById('ideaList').style.background = "#fff";
                }
                window.onload = function(){waterFall();}function page(n, s) {
            var ideaType = <%=ideaType%>;
            parent.window.document.getElementById("mainFrame").src = "${ctxf}/trend/idea/ideaList?&ideaType="+ ideaType+ "&pageNo=" + n + "&pageSize=" + s ;
     } 
     function down(obj,id){
        var pgcUrl = "<%=request.getHeader("Referer")%>";
        var href = "${ctxf}/trend/idea/download/"+encodeBase64(""+id)+"?pgcUrl="+pgcUrl;
        window.open(href);
    }
            var box = document.getElementById('box');
            var items = box.children;
            // 定义每一列之间的间隙 为10像素
            var gap = 20;
                // 封装成一个函数
            function waterFall() {
                    var itemWidth = items[0].offsetWidth;
                    var columns = 5;
                    var arr = [];
                    for (var i = 0; i < items.length; i++) {      
                        if (i < columns) {
                            items[i].style.top = 0;
                            items[i].style.left = (itemWidth + gap) * i + 'px';
                            arr.push(items[i].offsetHeight);
                        } else {
                            var minHeight = arr[0];
                            var index = 0;
                            for (var j = 0; j < arr.length; j++) {
                                if (minHeight > arr[j]) {
                                    minHeight = arr[j];
                                    index = j;
                                }
                            }     
                            items[i].style.top = arr[index] + gap + 'px';
                            items[i].style.left = items[index].offsetLeft + 'px';
                            arr[index] = arr[index] + items[i].offsetHeight + gap;
                        }
                    }
                    var max = Math.max.apply(null, arr);
                    box.style.height = max  + 20 +  "px";
                    document.getElementById('page').style.display = "flex";
                    document.getElementById('ideaList').style.background = "#fff";
                }
                window.onload = function(){waterFall();}