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


Posted in Javascript onJanuary 12, 2015

分析:瀑布流,做法有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();
Javascript 相关文章推荐
一个javascript参数的小问题
Mar 02 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 #Javascript
jQuery制作拼图小游戏
Jan 12 #Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 #Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 #Javascript
原生javascript实现图片弹窗交互效果
Jan 12 #Javascript
原生javascript实现图片按钮切换
Jan 12 #Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 #Javascript
You might like
PHP 动态随机生成验证码类代码
2010/04/09 PHP
来自phpguru得Php Cache类源码
2010/04/15 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
浅析JS运动
2015/12/28 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
python通过加号运算符操作列表的方法
2015/07/28 Python
Python算法应用实战之栈详解
2017/02/04 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
使用python3实现操作串口详解
2019/01/01 Python
python实现控制台打印的方法
2019/01/12 Python
Python any()函数的使用方法
2019/10/28 Python
Python扫描端口的实现
2021/01/25 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
工作过失检讨书
2014/02/23 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
消防安全责任书范本
2014/04/15 职场文书
同事去世追悼词
2015/06/23 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
python获取带有返回值的多线程
2022/05/02 Python