jQuery怎么实现网页的瀑布流效果

首先我们在页面中加入了一些图片元素，都加到id为container的元素中，每一张图片都在一个class为box的容器里，然后里面是一张图片。

在JS中，我们遍历了每一个box，实现box的位置为上一行高度最小的box的位置。

function imgLocation(){

    var box = $(“.box”);

    var boxWidth = box.eq(0).width();

    var num = Math.floor($(window).width()/boxWidth);

    var boxArr=[];

    box.each(function(index,value){

        var boxHeight = box.eq(index).height();

        if(index<num){

            boxArr[index]= boxHeight;

        }else{

            var minboxHeight = Math.min.apply(null,boxArr);

            var minboxIndex = $.inArray(minboxHeight,boxArr);

            $(value).css({

                “position”:“absolute”,

                “top”:minboxHeight,

                “left”:box.eq(minboxIndex).position().left

            });

            boxArr[minboxIndex]+=box.eq(index).height();

        }

    });

}

最后实现了滚动条滑动时的动态加载

function scrollside(){

    var box = $(“.box”);

    var lastboxHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);

    var documentHeight = $(document).width();

    var scrollHeight = $(window).scrollTop();

    return (lastboxHeight<scrollHeight+documentHeight)?true:false;

}

调用如下

window.onscroll = function(){

            if(scrollside()){

                $.each(dataImg.data,function(index,value){

                    var box = $(“<div>”).addClass(“box”).appendTo($(“#container”));

                    var content = $(“<div>”).addClass(“content”).appendTo(box);

                    $(“<img>”).attr(“src”,“./img/”+$(value).attr(“src”)).appendTo(content);

                });

                imgLocation();

            }

        };

通过上述简单的设置我们就实现了瀑布流的效果。