瀑布流布局：

图片等宽，不定高，按最低高度来顺序排列；实现方法：获取每次获取四行中最低高度对应的一行，将下一张加载的图片放在该位置，每次加载前都获取最低高度；

①请求图片的接口    地址此php文件  参数 cpage=1,2,3,4;

 <?php

 header('Content-type:text/html;charset="utf-8"');

 /*

     API:

     getPics.php

     参数：

     cpage：获取数据的页数

  */

 $cpage=isset($_GET['cpage'])?$_GET['cpage']:1;

 $url='http://www.wookmark.com/api/json/popular?page=' . $cpage;

 $content=file_get_contents($url);

 $content=iconv('gbk', 'utf-8', $content);

 echo $content;

②请求方法 提前封装的ajax

 function ajax(method,url,data,success)

 {

         try{

             var xhr=new XMLHttpRequest();

             }

         catch(e)

         {

             var xhr=new ActiveXObject('Microsoft.XMLHTTP');

         }

         if(method=='get'&&data)

         {

             url+='?'+data;

         }

         xhr.open(method,url,true);

         if(method=='get')

         {

             xhr.send();

         }

         else

         {

             xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

             xhr.send(data);

         }

         xhr.onreadystatechange=function()

         {

             if(xhr.readyState==4)

             {

                 if(xhr.status==200)

                 {

                     success&&success(xhr.responseText);

                 }

                 else

                 {

                     alert("出错了Err:"+xhr.status);

                 }

             }

         }

 }

③请求数据

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

    body{margin:0;}

    #ul1{

        width:1080px;

        margin:100px auto 0;

    }

    #ul1 li{

        list-style: none;

        width:247px;

        float:left;

        margin-right:9px;

    }

    #ul1 li div{

        border:1px solid #000;

        padding:10px;

        margin-bottom: 10px;

    }

    img{

        width:225px;

        display:block;

    }

</style>

<script type="text/javascript" src='ajax.js'></script>

<script src="echo.min.js"></script>

<script type="text/javascript">

window.onload=function()

{

    var oUl=document.getElementById('ul1');

    var aLi=oUl.getElementsByTagName('li');

    var iLen=aLi.length;

    var iPage=1;

    var b=true;

    //获取初始化数据

    getList();

    function getList()

    {

        ajax('get','getPIcs.php','cpage='+iPage,function(data)

        {

            var data=JSON.parse(data);

            //后续没有数据了

            if(!data.length)

            {

                return;

            }

        for(var i=0;i<data.length;i++)

            {

                var _index=getShortLi();

                var oDiv=document.createElement('div');

                var oImg=document.createElement('img');

                oImg.src='loading.gif';

                oImg.setAttribute("data-echo",data[i].preview);  // echo .js 会自动将data-echo中数据替换到src 中，当图片在可视化区域内时

                oImg.style.width='225px';

                oImg.style.height=data[i].height*(225/data[i].width)+'px';

                oDiv.appendChild(oImg);

                var oP=document.createElement('p');

                oP.innerHTML=data[i].title;

                oDiv.appendChild(oP);

                aLi[_index].appendChild(oDiv);

//echo 初始化

                echo.init({

                    offset: 0,

                    throttle: 0

                });

            }

            b=true;

        });

    }

// 滚动时加载数据

    window.onscroll=function()

    {

        var _index=getShortLi();

        var oLi=aLi[_index];

        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

        if(oLi.offsetHeight+getTop(oLi)<document.documentElement.clientHeight+scrollTop)

        {

            if(b)

            {

                b=false;

                iPage++;  // 参数改变请求的数据改变

                getList();

            }

        }

    }

//取最短的li

    function getShortLi()

    {

        var index=0;

        var ih=aLi[index].offsetHeight;

        for(var i=1;i<iLen;i++)

        {

            if(aLi[i].offsetHeight<ih)

            {

                index=i;

                ih=aLi[i].offsetHeight;

            }

        }

        return index;

    }

    function getTop(obj)

    {

        var iTop=0;

        while(obj)

        {

            iTop+=obj.offsetTop;

            obj=obj.offsetParent;

        }

        return iTop;

    }

}

</script>

    <title></title>

</head>

<body>

<ul id="ul1">

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

</body>

</html>

④ 因为该demo运用到了ajax，所以需要在服务器环境下执行；

源码地址：https://github.com/shouzixiansheng/pubuliu.git

瀑布流实例及懒加载（echo.js）的更多相关文章

  1. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  2. 图片懒加载 echo.js

    (function (root, factory) { if (typeof define === 'function' && define.amd) { define(functio ...

  3. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  4. js原生图片懒加载 或 js原生图片预加载，html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

  5. 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

  6. 图片懒加载lazyload.js详解

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...

  7. 类似懒加载的js功能

    <!-- 显示15条数据 --> <ul class="list" pagesize="15"> <li> <div ...

  8. 图片懒加载--lazyload.js的用法

    这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...

  9. 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

    瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...

随机推荐

  1. NLP（二十三）使用LSTM进行语言建模以预测最优词

    N元模型 预测要输入的连续词,比如 如果抽取两个连续的词汇,则称之为二元模型 准备工作 数据集使用 Alice in Wonderland 将初始数据提取N-grams import nltk imp ...

  2. hdu 3038 How Many Answers Are Wrong（并查集的思想利用）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3038 题意:就是给出n个数和依次m个问题,每个问题都是一个区间的和,然后问你这些问题中有几个有问题,有 ...

  3. Linux入门基础之 中

    五.Linux 下获取帮助 没必要记住所有东西 Linux 提供了极为详细的帮助工具及文档,一定要养成查帮助文档的习惯,可以大大减少需要记忆的东西并且提高效率 5.1.HELP 几乎所有命令都可以使用 ...

  4. (转)java程序调用内存变化过程分析（详细）

    原博地址: https://blog.csdn.net/Myuhua/article/details/81385609 (一)不含静态变量的java程序运行时内存变化过程分析 代码: package ...

  5. Python3-编码问题-解决为何我的python打印总是出现乱码？？

    #python3 编码问题: ############举个例子############################### import sys print(sys.getdefaultencodi ...

  6. php文件加密解密

    利用base64加解密 base64_encode是加密,而base64_decode是解密 语法:string base64_encode(string data);   语法:string bas ...

  7. android.intent.category.BROWSABLE

    参考: http://blog.csdn.net/annkie/article/details/8349626 http://xiechengfa.iteye.com/blog/1004991 BRO ...

  8. apache ignite系列（四）：持久化

    ignite持久化与固化内存 1.持久化的机制 ignite持久化的关键点如下: ignite持久化可防止内存溢出导致数据丢失的情况: 持久化可以定制化配置,按需持久化; 持久化能解决在大量缓存数据情 ...

  9. JSP实例：彩色验证码

    本例使用一个JavaBean,名为Image.java,包com.zempty.bean下; 三个JSP文件,分别为image.jsp.login.jsp.check.jsp.其中login.jsp是 ...

  10. STL中bitset的用法

    终于又来写博客了 == bitset存储的是二进数位,就和一个bool性数组差不多.用法上和数组的操作方式也差不多. 每位只占一个字节,大大优化了空间,可以通过数组形式访问. bitset定义 可以用 ...