jQuery实现瀑布流布局详解（PC和移动端）(3)

最后有一点要注意，因为我们没有像百度一样用一个个列盒子去装，而是用定位的方式。导致的问题是图片元素的父级没法自适应高度，如果你有相关的需求我们可以计算出所有列中最长的长度，并将这个值赋值给父容器的min-height属性：

$('body').css('minHeight',Math.max.apply(null, columnHeightArr)); 

整理下完整的代码，瀑布流的全套服务就到这了

var dataArr = [ {picUrl:'https://www.jb51.net/article/resource/images/1.jpg',width:522,height:783}, {picUrl:'https://www.jb51.net/article/resource/images/2.jpg',width:550,height:786}, {picUrl:'https://www.jb51.net/article/resource/images/3.jpg',width:535,height:800}, {picUrl:'./resource/images/4.jpg',width:578,height:504}, {picUrl:'./resource/images/5.jpg',width:1440,height:900} ]; $.each(dataArr, function(index, item) { $("body").append('<div>' + '<div%"+'" data-src="'+item.picUrl+'"></div>' + '<div>Description</div>' + '</div>'); }); var boxArr = $('.box'), num = Math.floor(document.body.clientWidth / boxArr.eq(0).outerWidth(true)), columnHeightArr = []; columnHeightArr.length = num; arrangement(); 　　$('body').css('minHeight',Math.max.apply(null, columnHeightArr)); lazyLoad(); function arrangement() { boxArr.each(function(index, item) { if (index < num) { 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); } }); } function lazyLoad() { var boxArr = $('.box-item'); boxArr.each(function(index, item) { var viewTop = $(item).offset().top - $(window).scrollTop(), imgObj = $(item).find('.img'); if ((viewTop < $(window).height()) && ($(item).offset().top + $(item).outerHeight(true) > $(window).scrollTop())) { // console.log($(item).attr('data-src')); imgObj.css('backgroundImage','url('+imgObj.attr("data-src")+')').removeClass('data-src'); $(item).removeClass('box-item'); } }) } function cRate(obj) { return obj.height / obj.width; } function scrollLoad() { var viewHeight = $(window).scrollTop() + $(window).height(), minHeight = Math.min.apply(null, columnHeightArr); if (viewHeight >= minHeight) { //loadMore... } } $(window).scroll(function() { lazyLoad(); scrollLoad(); });

以上就是为大家分享的关于jQuery瀑布流布局，内容很丰富，需要大家一点点的理解消化，真正的做到学以致用，希望能够帮助到大家。

您可能感兴趣的文章: