瀑布流布局：

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

①请求图片的接口    地址此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. HDU-3038How Many Answers Are Wrong权值并查集

    How Many Answers Are Wrong 题意:输入一连串的区间和,问和前面的矛盾个数: 思路:我在做专题,知道是并查集,可是还是不知道怎么做,学了一下权值并查集和大佬的优秀思路,感觉回了 ...

  2. POJ-2253-Frogger +最短路小变形

    传送门:http://poj.org/problem?id=2253 参考:https://www.cnblogs.com/lienus/p/4273159.html 题意:给出一个无向图,求一条从 ...

  3. CodeForces 760 C. Pavel and barbecue（dfs+思维）

    题目链接:http://codeforces.com/contest/760/problem/C 题意:一共有N个烤炉,有N个烤串,一开始正面朝上放在N个位子上.一秒之后,在位子i的串串会移动到pi位 ...

  4. asp.net core系列 72 Exceptionless使用介绍

    一.Exceptionless介绍 Exceptionless专注于.net平台提供实时错误和日志报告.主要包括:错误通知.智能分组异常.详细错误报告堆栈跟踪.支持离线.UI查看重要错误和确定优先级. ...

  5. Leetcode:合并两个有序链表

    class Solution { public ListNode mergeTwoLists(ListNode l1, ListNode l2) { if (l1 == null) { return ...

  6. 网页去重之Simhash算法

    Simhash算法是Google应用在网页去重中的一个常用算法,在开始讲解Simhash之前,先了解——什么是网页去重?为什么要进行网页去重?如何进行网页去重,其基本框架是什么?   网页去重,顾名思 ...

  7. 运维核心基础知识之——MD5sum校验文件

    如何使用MD5sum工具校验你的文件. 演示过程截图: 先给文件创建一个md5值 md5sum oldboy.txt 然后将md5sum生成的md5值写入到一个文件police.log md5sum ...

  8. 时间复杂度big-O、Big-Omega和big-Theta

    我们有三种曲线:   A curve that we know is "above" the running time function when n is large. ( Bi ...

  9. Python网络爬虫实战(一)快速入门

    本系列从零开始阐述如何编写Python网络爬虫,以及网络爬虫中容易遇到的问题,比如具有反爬,加密的网站,还有爬虫拿不到数据,以及登录验证等问题,会伴随大量网站的爬虫实战来进行. 我们编写网络爬虫最主要 ...

  10. 修改和编译spring源码，构建jar(spring-context-4.0.2.RELEASE)

    上周在定位问题时,发现Spring容器实例化Bean的时候抛出异常,为了查看更详细的信息,决定修改spring-context-4.0.2.RELEASE.jar中的CommonAnnotationB ...