JS-2列瀑布流布局

来源：互联网发布：数据分析可以考的证书编辑：程序博客网时间：2024/05/11 21:13

window.onload = function () {    var boxArr = $('.indexmsg'),        columnHeightArr = [];        columnHeightArr.length = 2;        Array.prototype.max=function(){            var maxH = 0;            for(var i=0;i<this.length;i++){                maxH=Math.max(maxH,this[i]);            }            return maxH;        }        boxArr.each(function(index, item) {        　　if (index < 2) {        　　　　columnHeightArr[index] = $(item).outerHeight(true);        　　} else {        　　　　var minHeight = Math.min.apply(null, columnHeightArr),                    minHeightIndex = $.inArray(minHeight, columnHeightArr);        　　　　$(item).css({                 　　position: 'absolute',                 　　top: minHeight,                 　　left: boxArr.eq(minHeightIndex).position().left                 });        　　　　columnHeightArr[minHeightIndex] += $(item).outerHeight(true);        　　}        document.getElementsByClassName("indexmsglist")[0].style.height=columnHeightArr.max()+"px";        });    }

注意：链接jquery库

indexmsglist的position设为relative

阅读全文

0 0