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 相关文章推荐
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
php socket通信简单实现
2016/11/18 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
简化vuex的状态管理方案的方法
2018/06/02 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
Django 静态文件配置过程详解
2019/07/23 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
教师岗位职责
2013/11/17 职场文书
公路绿化方案
2014/05/12 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏