JQ实现瀑布流

作者: Miss_Fairy | 来源:发表于2017-08-14 14:55 被阅读0次

JQ实现瀑布流
瀑布流布局_木桶布局
瀑布流
jq瀑布流
JQ 方式瀑布流
前端一些工具
瀑布流布局的学习
swift实现瀑布流
「实战」蘑菇街 PC 端首页，瀑布流布局的实现原理与细节技巧
iOS瀑布流

image.png

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        img {
            display: block;
        }
        #main {
            position: relative;
        }
        .box {
            padding: 15px 0 0 15px;
            float: left;

        }
        .picBox {
            width: 200px;
            /*margin-bottom: 10px;*/
        }
        .picBox img {
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="main">
    </div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(window).on('load',function(){
      ImgArr = [
                {url:'https://pic3.40017.cn/poi/2016/03/02/18/k9EyuA_222x436_00.jpg'},
                {url:'https://pic4.40017.cn/poi/2016/07/08/14/D4zlPD_222x208_00.jpg'},
                {url:'https://pic4.40017.cn/poi/2016/07/07/12/RsWjpx_300x300_00.jpg'},
                {url:'https://pic5.40017.cn/02/001/e4/dc/rBLkCFlcXQqAe1nJAADHdsrPMPs903.jpg'},
                {url:'https://pic3.40017.cn/zzy/rimage/2015/05/06/17/CIC3dX_90x90_00.jpg'},
                {url:'https://pic3.40017.cn/line/admin/2014/10/22/15/VXf1RC_464x251_00.jpg'},
                {url:'https://pic4.40017.cn/zzy/rimage/2016/10/11/22/OiwXbD_242x150_00.jpg'},
                {url:'https://pic5.40017.cn/01/000/e4/7b/rBANC1lcWqGARH-WAADACF2zBS0862.jpg'},
                {url:'https://pic4.40017.cn/poi/2016/07/07/12/RsWjpx_300x300_00.jpg'},
                {url:'https://pic5.40017.cn/02/001/e4/dc/rBLkCFlcXQqAe1nJAADHdsrPMPs903.jpg'},
                {url:'https://pic3.40017.cn/poi/2016/03/02/18/k9EyuA_222x436_00.jpg'},
                {url:'https://pic4.40017.cn/poi/2016/07/08/14/D4zlPD_222x208_00.jpg'},
                {url:'https://pic4.40017.cn/zzy/rimage/2016/10/11/22/OiwXbD_242x150_00.jpg'},
                {url:'https://pic5.40017.cn/01/000/e4/7b/rBANC1lcWqGARH-WAADACF2zBS0862.jpg'},
                {url:'https://pic4.40017.cn/poi/2016/07/07/12/RsWjpx_300x300_00.jpg'},
                {url:'https://pic5.40017.cn/02/001/e4/dc/rBLkCFlcXQqAe1nJAADHdsrPMPs903.jpg'},
                {url:'https://pic3.40017.cn/poi/2016/03/02/18/k9EyuA_222x436_00.jpg'},
                {url:'https://pic4.40017.cn/poi/2016/07/08/14/D4zlPD_222x208_00.jpg'},
                {url:'https://pic4.40017.cn/zzy/rimage/2016/10/11/22/OiwXbD_242x150_00.jpg'},
                {url:'https://pic5.40017.cn/01/000/e4/7b/rBANC1lcWqGARH-WAADACF2zBS0862.jpg'},
                {url:'https://pic4.40017.cn/poi/2016/07/07/12/RsWjpx_300x300_00.jpg'},
                {url:'https://pic5.40017.cn/02/001/e4/dc/rBLkCFlcXQqAe1nJAADHdsrPMPs903.jpg'},
                {url:'https://pic3.40017.cn/poi/2016/03/02/18/k9EyuA_222x436_00.jpg'},
                {url:'https://pic4.40017.cn/poi/2016/07/08/14/D4zlPD_222x208_00.jpg'}
            ];
    waterFull();
    $(window).on('scroll',function(){
        if(isLoad()){
            ImgArr = ImgArr.concat(ImgArr);
            waterFull();
        }
    })
})
//瀑布流实现方法，从第二行开始总是把图片放在高度最短的图片后边
var ImgArr;
function waterFull(){

     for(var i = 0; i < ImgArr.length; i++){
        //创建大盒子
        var newBox = document.createElement('div');
        newBox.className = 'box';
        $("#main")[0].appendChild(newBox);
        //创建装图片的小盒子
        var newPic = document.createElement('div');
        newPic.className = 'picBox';
        newBox.appendChild(newPic);
        //创建图片
        var newImg = document.createElement('img');
        newImg.src = ImgArr[i].url;
        newPic.appendChild(newImg);
    }
    //拿到所有的大盒子
    var allBox = $('#main > .box');
    //求出盒子的宽度
    var boxWidth = $(allBox).eq(0).outerWidth();
    //求出浏览器的宽度
    var screenWidth = $(window).width();
    //算出图片一共有几列,向下取整
    var ImgCols = Math.floor(screenWidth/boxWidth);
    //求出父元素的宽度，让父元素居中显示
    $('#main').css({'width': boxWidth*ImgCols + 'px'});
    $("#main").css({'margin': '0 auto'});
    //子盒子定位
    //创建一个数组，用来存放所有的高度
    var heightArr = [];
    for(var i = 0; i< allBox.length; i++){
        //求出每个盒子的高度
        var boxHeight = $("#main").find(".box").eq(i).outerHeight();
        //第一行以上的盒子需要定位
        if(i < ImgCols){
            //添加第一行所有盒子的高度
            heightArr.push(boxHeight);
        } else {
            //求出最矮的盒子高度
            var minBoxHeight = Math.min.apply(null,heightArr);
            var minBoxIndex = $.inArray(minBoxHeight,heightArr);
            //盒子瀑布流定位，顶部间距就是最矮盒子的高度
            allBox.eq(i).css({
                            'position':'absolute',
                            'top':minBoxHeight + 'px',
                            'left':minBoxIndex * boxWidth + 'px'
                        });
            //更新数组最矮高度，使下一图片总是在高度数组中找到最矮高度的图片下面进行拼接
            heightArr[minBoxIndex] += boxHeight;
        }
    }
}
//自己可以加上下拉刷新方法
function isLoad(){
    //拿到最后一个盒子
    var lastBox = $('#main > div').last();
    //当滑动到最后一张图片的中间位置时开始加载下一页
    var lastCurrentHeight = $(lastBox).outerHeight() + $(lastBox).offset().top;
    //浏览器的高度
    var screenHeight = $(window).height();
    //页面滚动的高度
    var screenTopHeight = $(window).scrollTop();
    //何时加载页面
    return lastCurrentHeight <= screenHeight + screenTopHeight
}
</script>
</html>