jQuery实现瀑布流

最新推荐文章于 2021-10-11 19:56:55 发布

weixin_30699831

最新推荐文章于 2021-10-11 19:56:55 发布

阅读量55

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/weirihan/p/6030800.html

版权

瀑布流布局多用于加载图片，或者图片配上文字。视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动，还会不断加载数据块并附加至当前尾部。本文就来利用jQuery实现一个图片瀑布流的效果。

　　1.布局。

　　首先我们创建一个项目，导入jquery.js，以及十张图片。图片大小可以不一致。

　　先放入一个容器div（container）。然后创建一个div（box）用来承载图片及其他边缘效果，比如文字介绍等。在这个div里面再指定一个div（content）用来承载图片。

　　代码如下：

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

　　这时候图片是依次向下排列的，我们来加一个样式。首先通配符设置margin和padding都是0。然后box设置相对定位和向左浮动，这样图片就一张张挨在一起了。为了好看我们再给content加上一个边框。img固定一个宽度，高度设为auto。代码：

* {
    margin: 0;
    padding: 0;
}

.box {
    position: relative;
    float: left;
}

.content {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.content img {
    width: 200px;
    height: auto;
}

　　为了效果明显，我们将图片div多复制几个。至此布局基本上完成了，我们可以看到此时大致的样式出来了，但是图片上下排列还不够紧密。下面要修改图片的位置摆放。

　　2.图片位置摆放

　　根据瀑布流效果可以看出，第二排的第一张图片应该放在第一排最短的一张图片下面，之后也是依次按照这个规则摆放。下面我们用jQuery实现：

$(document).ready(function(){//加载文档
    $(window).on("load",function(){//监听window的加载事件
        imgLocation();
    });
});

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){//each遍历
        //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();//重新计算最短图片的高度
        }
    });
}

　　此时已经实现了瀑布流的效果。

3.滚动加载实现

　　首先要监听鼠标滚动事件。当最后一张图片滚动到一半的时候，创建对象，加载图片。

　　代码如下：

$(document).ready(function(){//加载文档
    $(window).on("load",function(){//监听window的加载事件
        imgLocation();
        var dataImg = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]}
        window.onscroll = function(){
            if(scrollside()){
                $.each(dataImg.data,function(index,value){
                    //jQuery动态创建div和img
                    var box = $("<div>").addClass("box").appendTo($("#container"));//创建一个div，添加class，加载到容器中
                    var content = $("<div>").addClass("content").appendTo(box);//创建内容div加载到box中
                    $("<img>").attr("src","./img/"+$(value).attr("src")).appendTo(content);//创建图片加载到内容中
                    imgLocation();//新加入的图片遵循瀑布流布局的规则
                });
            }
        }
    });
});
function scrollside(){
    var box = $(".box");
    var lastboxHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);//最后一张图片距离顶端的距离加上最后一张图片高度的一半
    var documentHeight = $(document).height();//当前容器的高度
    var scrollHeight = $(window).scrollTop();//鼠标滚动的高度
    return (lastboxHeight<scrollHeight+documentHeight)?true:false;
}

4.bug修复。

　　上面的代码在窗口大小不断变化时会出现bug，列数不随窗口大小改变。修复这个bug我们可以在window的加载事件监听的地方加上一个监听窗口大小变化的函数，当窗口大小改变时调用一遍布局函数imgLocation();

　　这样窗口拉小已经可以跟着改变，但是重新拉大列数不会跟着增加，而是叠加在已有列上。这是因为拉大以后余出的空间没有box，获取到的box的left是原有列的，所以新图片会叠加在前面的列上。所以我们在if(index<num)时重新赋一遍位置。

　　如下黄色底色部分就是修改的代码。　　最终js代码如下：

$(document).ready(function() { //加载文档
    $(window).on("load", function() { //监听window的加载事件
        imgLocation();
        var dataImg = { "data": [{ "src": "0.jpg" }, { "src": "9.jpg" }, { "src": "3.jpg" }, { "src": "4.jpg" }, { "src": "5.jpg" }, { "src": "6.jpg" }, { "src": "7.jpg" }] }
        /*鼠标滚动时：*/
        window.onscroll = function() {
            if (scrollside()) {
                $.each(dataImg.data, function(index, value) {
                     //jQuery动态创建div和img
                     var box = $("<div>").addClass("box").appendTo($("#container")); //创建一个div，添加class，加载到容器中
                     var content = $("<div>").addClass("content").appendTo(box); //创建内容div加载到box中
                     $("<img>").attr("src", "./img/" + $(value).attr("src")).appendTo(content); //创建图片加载到内容中
                     imgLocation(); //新加入的图片遵循瀑布流布局的规则
                });
            }
        }
        /*窗口大小变化时：*/
        window.onresize = function() {
            imgLocation();
        }
    });
});

/*动态加载*/
function scrollside() {
    var box = $(".box");
    var lastboxHeight = box.last().get(0).offsetTop + Math.floor(box.last().height() / 2); //最后一张图片距离顶端的距离加上最后一张图片高度的一半
    var documentHeight = $(document).height(); //当前容器的高度
    var scrollHeight = $(window).scrollTop(); //鼠标滚动的高度
    return (lastboxHeight < scrollHeight + documentHeight) ? true : false;
}

/*瀑布流布局实现*/
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) { //each遍历
        //index是图片位置，value是相对应的元素。
        var boxHeight = box.eq(index).height();

        if (index < num) {
            boxArr[index] = boxHeight;
            /*重新设置第一行的元素位置，避免窗口由小拉大时出错：*/
            $(value).css({
                "position": "absolute",
                "top": 0,
                "left": boxWidth * index
            });
        } else {
            var minboxHeight = Math.min.apply(null, boxArr); //获取最小高度
            //console.log(minboxHeight);
            var minboxIndex = $.inArray(minboxHeight, boxArr); //获取最小高度图片的位置
            // console.log("minboxIndex:"+minboxIndex);
            $(value).css({
                "position": "absolute",
                "top": minboxHeight,
                "left": box.eq(minboxIndex).position().left
            }); //下一张图片摆放在最短图片的下面
            boxArr[minboxIndex] += box.eq(index).height(); //重新计算最短图片的高度
        }
    });
}