jQuery实现瀑布流的取巧做法分享

177 阅读 0 评论 117 点赞

我是靠谱客的博主柔弱茉莉，最近开发中收集的这篇文章主要介绍jQuery实现瀑布流的取巧做法分享，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

分析：瀑布流，做法有2种

（1）绝对定位方案：每个单元格设置为绝对定位，通过计算，分别设置 top , left 即可实现

（2）浮动方案：弄N列布局（浮动），然后图片数据，按顺序依次插入，如N为3列，第一张图片插入到第一列，第二张图片插入到第二列，第三张图片插入到第三列，第四张图片插入到第一列........这样循环插入（不能自适应）

CSS与HTML代码：

复制代码代码如下:

　　body,ul,li{margin:0;margin:0;}

    ul{list-style:none;}

    .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1}

    /*瀑布流*/

    .wallList{width:860px;}

    .wallList li{float:left;display:inline;margin-right:16px;}

    .wallList li a{background:#eee;border:1px solid #ccc;padding:5px 5px 0 5px;display:block;margin-bottom:10px;}

    .wallList li a:hover{border-color:#f60;}

    .wallList li .name{display:block;text-align:center;padding:8px 0;} 

    .loadTips{text-align:center;padding:15px 0;}

复制代码代码如下:

<div class="wallList" id="wallList">

        <ul class="clearfix">

            <li></li>

            <li></li>

            <li></li>

        </ul>

        <p class="loadTips" id="loadTips"><span>正在加载......</span></p>

</div>

使用jQuery实现，大概思路如下：

　　（1）获取N列中最小的高度值，JS提供的API是Math.min()，但这个API最多只能传入 2 个参数，所以就需要用aplly来扩展，Math.min.apply(null,[xxx,xxx,xxxx,xxxx])
　　（2）给 window 绑定 scroll事件，下拉的时候获取 $(document).scrollTop() ，当 $(document).scrollTop() 大于最小的高度值，就ajax请求url，如果有数据，就往页面插入HTML结构，没有则提示 “加载完”，然后window解绑此事件

复制代码代码如下:

// 数据格式

    var testJson = {

        "status":1,

        "data":[

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","width":240,"height":300,"name":"图片1"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","width":240,"height":210,"name":"图片2"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x190/f60/fff","width":240,"height":190,"name":"图片3"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"图片4"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"图片5"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x260/eee/fff","width":240,"height":260,"name":"图片6"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x180/000/fff","width":240,"height":180,"name":"图片7"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x240/B5E61D/fff","width":240,"height":240,"name":"图片8"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x265/B5E61D/fff","width":240,"height":265,"name":"图片9"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x245/259/fff","width":240,"height":245,"name":"图片10"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x310/B5E61D/fff","width":240,"height":310,"name":"图片11"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"图片12"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x150/B5E61D/fff","width":240,"height":150,"name":"图片13"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x165/B5E61D/fff","width":240,"height":165,"name":"图片14"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x100/B5E61D/fff","width":240,"height":100,"name":"图片15"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"图片16"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x225/B5E61D/fff","width":240,"height":225,"name":"图片17"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"图片18"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"图片19"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"图片20"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","width":240,"height":300,"name":"图片21"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","width":240,"height":210,"name":"图片22"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x190/f60/fff","width":240,"height":190,"name":"图片23"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"图片24"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"图片25"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/eee/fff","width":240,"height":210,"name":"图片26"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x180/000/fff","width":240,"height":180,"name":"图片27"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x240/B5E61D/fff","width":240,"height":240,"name":"图片28"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x195/B5E61D/fff","width":240,"height":195,"name":"图片29"},

            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x245/259/fff","width":240,"height":245,"name":"图片30"}

        ]

    }

    var wallPic = function(){

        var $target = $('#wallList'),

            $li = $target.find('li'),

            $tips = $('#loadTips'),

            oTop = 0,//滚动判断的值

            row = 3,//列数

            page = 1,//ajax请求的页码值

            url = 'xxxx', //ajax请求地址

            on_off = true; //插入结构的开关，防止ajax错误性多次加载数据

        return{

            fillData:function(callback){

                var _that = this;

                on_off = false;

                /* ajax

                --------------------*/

                // $.get(url,{ page:page,count:30 },function(json){

                //     if(json.status==1){

                //         _that.appendHTML(json.data);

                //         on_off = true;

                //         page++;

                //     }else{

                //         _that.loadedTips();

                //     }

                // },'json');

                /* 模拟测试-设置定时器模拟ajax请求数据

                -----------------------*/

                setTimeout(function(){

                    // 模拟终止

                    if(page==3){

                        _that.loadedTips();

                        return;

                    } 

                    _that.appendHTML(testJson.data);

                    on_off = true;

                    page++;                    

                },400);

            },

            appendHTML:function(data){

                var len = data.length,

                    n = 0;

                for(;n<len;n++){

                    var k = 0;

                    n>(row-1)?k=n%row:k=n;

                    $li[k].innerHTML += '<a href="'+data[n].href+'" target="_blank"><img src="'+data[n].src+'" width="'+data[n].width+'" height="'+data[n].height+'" alt="'+data[n].name+'" /><span class="name">'+data[n].name+'</span></a>';

                }

                this.getOTop();

            },

            getOTop:function(){

                oTop = Math.min.apply(null,[$li.eq(0).height(),$li.eq(1).height(),$li.eq(2).height()])+$target.offset().top;

            },

            loadedTips:function(){

                $('#loadTips').find('span').text('数据已加载完');

                setTimeout(function(){

                    $('#loadTips').css({'visibility':'hidden'});

                },200);

                // 解绑事件

                $(window).unbind('scroll',$.proxy(this.scrollEvent,this));

            },

            scrollEvent:function(){

                if($(document).scrollTop()+$(window).height()>oTop&&on_off){

                    this.fillData();                        

                }

            },

            init:function(){

                this.fillData();

                $(window).bind('scroll',$.proxy(this.scrollEvent,this));

            }

        }

    }();

    wallPic.init();