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 相关文章推荐
js二维数组排序的简单示例代码
Jan 24 Javascript
关于JS中prototype的理解
Sep 07 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery常用选择器详解
Jul 17 jQuery
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
keep-alive保持组件状态的方法
Dec 02 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 执行系统命令的方法
2009/07/07 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
js 文件引入实现代码
2010/04/23 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
python如何实现内容写在图片上
2018/03/23 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
一百行python代码将图片转成字符画
2021/02/19 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
资产评估专业学生的自我鉴定
2013/11/14 职场文书
颐和园的导游词
2015/01/30 职场文书
总经理检讨书范文
2015/02/16 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
花田少年史观后感
2015/06/16 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python
Python保存并浏览用户的历史记录
2022/04/29 Python