jQuery应用五之瀑布流效果的实现

综述

这里我们来利用jQuery实现瀑布流效果。

在线演示

我们首先来在线演示一下效果，然后我们说一下是怎样的实现，点开链接进行预览吧 在线预览

代码分析

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

<div id="container">
        <div class="box">
            <div class="content">
                <img src="img/1.jpg">
            </div>
        </div>
</div>

在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();
            }
        };

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

源码下载

源码下载

综述

以上便是瀑布流效果的实现，希望对大家有一定帮助！