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工具 Cookie 封装
Aug 21 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
常用jQuery代码分享
Jul 14 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
Vue 3.0双向绑定原理的实现方法
Oct 23 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
SONY SRF-40W电路分析
2021/03/02 无线电
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
PHP多维数组排序array详解
2017/11/21 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python中使用PIPE操作Linux管道
2015/02/04 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
Python中turtle库的使用实例
2019/09/09 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
python实现感知机模型的示例
2020/09/30 Python
python中count函数知识点浅析
2020/12/17 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
最新教师自我评价分享
2013/11/12 职场文书
财产公证书格式
2014/04/10 职场文书
综治工作心得体会
2014/09/11 职场文书
员工旷工检讨书
2015/08/15 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
python编程实现清理微信重复缓存文件
2021/11/01 Python
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
Python各协议下socket黏包问题原理
2022/04/12 Python