JQ实现瀑布流

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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容