瀑布流布局：

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

①请求图片的接口    地址此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. SCRUM的三个工件

    转自:http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html#tab-id-6 Scrum 的工件以不同的方式展现工作和价值,可 ...

  2. Features Track 2018徐州icpc网络赛 思维

    Morgana is learning computer vision, and he likes cats, too. One day he wants to find the cat moveme ...

  3. CodeForces 223C Partial Sums 多次前缀和

    Partial Sums 题解: 一个数列多次前缀和之后, 对于第i个数来说他的答案就是 ; i <= n; ++i){ ; j <= i; ++j){ b[i] = (b[i] + 1l ...

  4. adb 端口冲突

    第一种方法:可以设置另一个端口 第二种方法: http://blog.csdn.net/hwl1314/article/details/52538023 Android studio 5037端口被占 ...

  5. Java面试-List中的sort详细解读

    最近看了一些排序相关的文章,因此比较好奇,Java中的排序是如何做的.本片文章介绍的是JDK1.8,List中的sort方法. 先来看看List中的sort是怎么写的: @SuppressWarnin ...

  6. shell常用标识符及应用范例

    前言: Shell脚本是Linux开发工作中常用的工具,但是我一直没有找到一个适合自己的简明扼要的HandBook.在工作过程中整理了一下,贴在这里以备查看. 一.基础篇 1.对文件的判断:(命令执行 ...

  7. MYSQL之B+TREE索引原理

    1.什么是索引? 索引:加速查询的数据结构. 2.索引常见数据结构 顺序查找: 最基本的查询算法-复杂度O(n),大数据量此算法效率糟糕. 二叉树查找:(binary tree search): O( ...

  8. spring boot使用guava缓存

    1.pom中插入依赖: <!--guava缓存cache--> <dependency> <groupId>com.google.guava</groupId ...

  9. springBoot异常统一处理

    springBoot异常统一处理 采用@ControllerAdvice注解和@ExceptionHandler注解,可以对异常进行统一处理. 1.结构图: 2.pom.xml文件: <?xml ...

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

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