代码: 两列图片瀑布流（一次后台取数据，无ajax，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

【思路】：

图片瀑布流，网上代码有多种实现方式，也有各类插件。没找到合意的，所以根据网上找的一段代码，进行了较大改动。

需引用 zepto 或 jquery。

我这个是应用于手机上的，两列瀑布流，图片高度未知——等图片的onloaded事件触发后，才对容器进行计算和定位。

大容器是 $("#imgList")，容器格子是$(".pin")

初始状态下，php一次性生成全部容器格子的数据（大约几十个吧。因为瀑布流不可能是无限制瀑布流，适可而止的呈献给用户合适数量的图片就足以满足需求了），不采用ajax。这样代码存在于真实的网页源码中，也适合seo。后台也不必单独开发接口，易于管理。

$(this.aPin).addClass("hide").addClass("l");//初始化：先一次性将所有容器格子设为隐藏+左浮动。

滚动后触发事件，只有容器格子中的图片被加载后，容器格子才会移除隐藏状态。

之后计算左列和右列已有的高度（图片未载入完毕的容器格子为隐藏状态，不计算），每一个新的容器格子，都追加到当前最短的一列。也就是添加样式 .l  或 .r

WATERFALL.Timer ：说一下这个定时器。图片的onloaded事件会触发很多次，为了避免载入每张图片后，都将页面重绘计算一次，所以加了个定时器作限制。(100毫秒后如无新图载入，调用计算页面位置的方法；有新图载入，仅仅只刷新定时器)

其它参数可参考.js文件页头注释

下面先谈一下scroll事件，后面再给出正式代码。

前言：我们先看一下scroll事件，调用得太频繁了 （chrome中打开，用鼠标拉一下滚动条，看一下控制台）

<p>拿鼠标拖动一下滚动条，看看scroll事件触发的有多么频繁</p>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><hr>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><hr>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><hr>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><hr>

<script src="http://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>

<script type="text/javascript">

$(function(){

    var WATERFALL = {

        scroll:function() {//发生滚动后，调用此方法

            var curTime=new Date().getTime();

            console.log(curTime);

        },

    };

//------------------------正文--------------------------

    //滚屏

    $(window).scroll(function() {

        WATERFALL.scroll('#imgList','.pin');

    });

});

</script>

所以需要对滚屏事件加一下限制：（增加了一个变量logTime，记载上一次滚动请求的时间）   （这种废弃，用下面那个）

    var WATERFALL = {

        logTime:0,//最后一次滚屏操作的时间

        checkscroll:function() {

            //两次滚动请求之间时间需大于500毫秒，避免多次请求

            var curTime=new Date().getTime();

            if(this.logTime > (curTime-500) ){

                return false;

            }else{

                this.logTime = curTime;

                return true;

            }

        },

        scroll:function() {//发生滚动后，调用此方法

            if(this.checkscroll()){

                var curTime=new Date().getTime();

                console.log(curTime);

            }

        },

    };

又一种降低频繁请求的写法：2015-11-19

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

    var timer;

    $(window).scroll(function () {

        clearTimeout(timer);

        timer = setTimeout(function () {

            console.log(new Date().getTime());

            console.log($(document).scrollTop());

        }, 100);

    });

});

</script>

正式代码：

1.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图片瀑布流</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="msapplication-tap-highlight" content="no">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta http-equiv="pragma" content="no-cache" />

</head>

<body>

<!-- 图片瀑布流: start -->

<div id="imgList">

    <div class="pin"><a class="box" href="test2.html"><img src="data:images/dd.png" data-src="data:images/_1.jpg"><p>aaaaa</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="http://h.hiphotos.baidu.com/zhidao/pic/item/6a63f6246b600c3320b14bb3184c510fd8f9a185.jpg"><p>风景图1</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/32fa828ba61ea8d34e62be55970a304e251f581b.jpg"><p>风景图222</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_2.jpg"><p>cccccccccc</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_3.jpg"><p>dddddddddddd</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_4.jpg"><p>eeeeeeeeeeee</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="http://f4.topit.me/4/53/7e/11949842569497e534o.jpg"><p>ffffffff</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_1.jpg"><p>gggggg</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_2.jpg"><p>hhhhhhhhh</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_3.jpg"><p>iiiiiiiii</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_4.jpg"><p>jjjjjjjjj</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_5.jpg"><p>kkkkkkkkkk</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_1.jpg"><p>lllll</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_2.jpg"><p>mmmmmm</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_3.jpg"><p>nnnnnnnnnnn</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_1.jpg"><p>ooooooooooo</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_2.jpg"><p>ppppppppp</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_3.jpg"><p>qqqqqqqqqq</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_1.jpg"><p>rrrrrrrrrr</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_2.jpg"><p>sssssssss</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_3.jpg"><p>tttttttttttt</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_1.jpg"><p>uuuuuuuuuuu</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_2.jpg"><p>vvvv</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_3.jpg"><p>ww</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_1.jpg"><p>xxx</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_2.jpg"><p>yyyyyyyy</p></a></div>

    <div class="pin"><a class="box"><img src="data:images/dd.png" data-src="data:images/_3.jpg"><p>zzzz</p></a></div>

</div>

<!-- 图片瀑布流: end -->

<style type="text/css">

html,body,p{margin:0;padding:0;}

body{background:#e8e8e8;}

#imgList{position:relative;width:100%;overflow:auto;}

#imgList > .hide{display:none;}/*初始化时 .pin 会被js设为隐藏*/

#imgList > .l{float:left;padding:10px 5px 0 10px;}/*左列*/

#imgList > .r{float:right;padding:10px 10px 0 5px;}/*右列*/

#imgList .pin{position:relative;width:50%;padding:10px 5px 0 10px;box-sizing: border-box;margin:0;}

#imgList .box{display:block;background:#fff;padding:0;box-sizing:border-box;}

#imgList .box > img{width:100%;height:auto;}

#imgList .box > p{padding:14px 6px 14px 6px;font-size:14px;text-align:left;color:#333;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}

</style>

<script src="http://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>

<script type="text/javascript" src="waterfall.js"></script><!-- 瀑布流js -->

</body>

</html>

waterfall.js

$(function(){

/***

【两列图片瀑布流(图片高度未知)】

firstCounter:5,//设置：第一次加载几张

limit:3,//设置每次加载几张

cur:0,//当前第几张

init()方法：初始化，将所有容器设为隐藏+左浮动

loadimg()方法：给每个图片加onload事件，图片载入后，触发

waterfall()方法: 对瀑布流排序和定位（容器中如果图片未载入完毕的，依旧隐藏。）

checkscroll()方法: 滚动检测

    logTime变量:    两次滚动加载请求之间时间需大于500毫秒，避免高频率请求

scroll()方法: 发生滚动后，调用次方法

*/

var WATERFALL = {

    oParent: "",// 父级对象名

    aPin: "",// 存储块框pin的类名

    logTime:0,//最后一次滚屏操作

    Timer:null,//图片载入后，加延迟定时器

    firstCounter:8,//设置：第一次加载几张

    limit:3,//设置每次加载几张

    cur:0,//当前第几张

    init:function(parent,pin) {//初始化

        this.oParent = parent;    //parend 父级id

        this.aPin = pin;        //pin 容器

        $(this.aPin).addClass("hide").addClass("l");//初始化：先将所有容器设为隐藏+左浮动。

        this.loadimg(0,this.firstCounter);//第一次载入的图片

    },

    loadimg:function(_start,_end) {

        if(_end > $(this.aPin).length){_end = $(this.aPin).length;}//去掉超出总数的不合理数据

        this.cur = _end;

        for(var i=_start;i<_end;i++){

            var _aPin = $(this.aPin).eq(i);

            var _img = _aPin.find("img");

            _img.attr("src",_img.attr("data-src"));

            //图片load事件

            _img.bind("load",function(){

                var _aPin = $(this).parents( WATERFALL.aPin );//容器

                _aPin.removeClass("hide");//图片已载入后，显示容器

                console.log("-----图片载入次序---"+_aPin.index());

                //定时器(100毫秒后如无新图载入，计算位置；有新图载入，刷新定时器)——避免频繁重复操纵页面

                clearTimeout(WATERFALL.Timer);

                WATERFALL.Timer = setTimeout(function(){

                    WATERFALL.waterfall();

                }, 100);//100毫秒

            });

        }

    },

    waterfall:function() {

            console.log("waterfall (图片排序)----!!");

            //左右列的当前累计总高度（不包含当前容器高）

            var _sumH1=0;

            var _sumH2=0;

            $(this.aPin).eq(0).addClass("l");

            for(var i=0;i<$(this.aPin).length;i++){//遍历数组aPin的每个块框元素

                var _aPin = $(this.aPin).eq(i);

                if(_aPin.hasClass("hide")==false){//判断是否该容器的图片已载入

                    var _sumH = _aPin.position().top + _aPin.height();//当前容器相对于父元素的偏移 + 当前元素高（为下一次循环准备数据）

                    //_aPin.attr("data-sum1",_sumH1);

                    //_aPin.attr("data-sum2",_sumH2);

                    //_aPin.attr("data-h",_aPin.height());

                    if(i==0){

                        _sumH1 = _sumH;

                    }else{

                        if(_sumH2>_sumH1){

                            _aPin.removeClass("r").addClass("l");//左列

                            _sumH1  = _sumH;

                        }else{

                            _aPin.removeClass("l").addClass("r");//右列

                            _sumH2  = _sumH;

                        }

                    }

                }

            }

    },

    checkscroll:function() {

        //两次滚动请求之间时间需大于500毫秒，避免多次请求

        var curTime=new Date().getTime();

        if(this.logTime > (curTime-500) ){

            return false;

        }else{

            var oParent = $(this.oParent);

            var aPin = $(this.aPin);

            if(aPin.length==0){return false;}//空数据不作处理

            var aPinLast = aPin.eq(this.cur-1);//最后一个显示的容器

            var lastPinH =  aPinLast.offset().top + aPinLast.height()-10;//到最后一个容器的高度时，载入下一次

            var scrollTop = $(document.body).scrollTop();//滚动高度

            var windowH = $(window).height();//页面高度

            //console.log("lastPinH=" + lastPinH +",   scrollTop="+scrollTop +"--- windowH:"+windowH+"  >>> "+ (lastPinH - scrollTop -windowH ) );

            if( (lastPinH - scrollTop -windowH ) < 0 ){//到达指定高度后 返回true，触发waterfall()函数

                this.logTime = curTime;//更新时间标记

                //console.log("第"+this.cur+"个， 总共"+aPin.length+"个");

                if(this.cur >= aPin.length){

                    return false;

                }else{

                    this.counter++;

                    return true;

                }

            }else{

                return false;

            }

        }

    },

    scroll:function(parent,pin) {//发生滚动事件后，调用此方法

        if(this.checkscroll()){

            this.loadimg(this.cur,this.cur+this.limit);//每次需要新载入的图片

        }

    },

};

//------------------------正文--------------------------

    //1.初始化

    WATERFALL.init('#imgList','.pin');

    //2.滚屏加载

    $(window).scroll(function() {

        WATERFALL.scroll('#imgList','.pin');

    });

});

....

代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）的更多相关文章

  1. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  2. Zepto picLazyLoad Plugin，图片懒加载的Zepto插件

    嗯,学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔--- 图片懒加载有很多js插件,非常著名的属jQuery的L ...

  3. JS实现图片懒加载插件

    一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...

  4. python爬虫之图片懒加载、selenium和phantomJS

    一.什么是图片懒加载 在网页中,常常需要用到图片,而图片需要消耗较大的流量.正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载<img src="xxx"> ...

  5. 带你认识网站图片img懒加载和预加载的区别

    懒加载 什么是懒加载? 懒加载也就是延迟加载.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览 ...

  6. js图片懒加载（滚动加载）是否生效

    一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...

  7. js图片懒加载（滚动加载）判断是否生效

    一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...

  8. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  9. 利用LruCache载入网络图片实现图片瀑布流效果(改进版)

    PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...

随机推荐

  1. 对TCP协议握手的理解（转）

    reference:https://www.cnblogs.com/awkflf11/p/9191708.html 目录: 31.Tcp握手的一些问题? 21.Tcp三次握手及SYN攻击: 四次握手? ...

  2. tomcat中web项目编译后的结构

    一. jsp文件在WEB-INF中 原项目结构及编译后的项目结构,原web项目与编译文件的对应关系如下:java下面的.java文件----->WEB-INF下的classes中,target下 ...

  3. Ubuntu16.04+CUDA8.0+cuDNN5.1+Python2.7+TensorFlow1.2.0环境搭建

    软件版本说明:我选的Linux系统是Ubuntu16.04,CUDA用的8.0,Ubuntu16.04+CUDA8.0+cuDNN5.1+Python2.7只支持TensorFlow1.3.0以下的版 ...

  4. Tex_Err:缺失wlscirep.cls

    使用期刊模板编译时,需要'.cls'一类格式文件支持.从Overleaf上直接Copy代码到本地,发现自己的tex运行时会报错: ! LaTeX Error: File `wlscirep.cls' ...

  5. 本地代码上传到githup

    1.githup网站创建new repository 2.执行下面命令,找到本地用户公钥地址 ssh -v git@github.com 输出: debug1: Offering RSA public ...

  6. android active间数据传递

    Bundle是key-value存储. Bundle bundle=new Bundle(); bundle.putString("key", "value") ...

  7. Linux系统下用find命令查找最近修改过的文件

    1.先进入指定目录,比如:cd /var/ftp/ss 2.输入指定命令,相关命令如下介绍: 最近24小时内修改过的文件 find ./ -mtime 0 前48~24小时修改过的文件 find ./ ...

  8. linu下未编译的mysql安装包

    wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.21.tar.gz

  9. 3.python集合

    1.集合1.不同元素组成2.无序排列的可hash值3.集合中元素必须是不可变类型(数字,字符串,元祖) 2.集合创建:(1)定义可变类型集合set:把里面元素一个一个进行for循环往大括号里放 set ...

  10. 蓝图Tips

    有些好用的节点,不写下来,很容易忘掉. 1. 调用命令行 2. 播放视频 播放后要播一小段才能进行暂停!