瀑布流布局：

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

①请求图片的接口    地址此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（五） 词性标注和文法

    NLTK内置词性标注器 用nltk.pos_tag()函数进行词性标注 import nltk nltk.download('averaged_perceptron_tagger') simpleSe ...

  2. 位运算总结(Bit Operation)

    位运算 数字用二进制表示后的运算 无论是有符号,无符号还是其他各种类型的数.它们之间的转换的基石就是二进制的表达式没有发生改变,变得只是转换的表达式. 1.简单的布尔运算 Boolean algebr ...

  3. LuoGuP1516 青蛙的约会 + 同余方程 拓展欧几里得

    题意:有两只青蛙,在一个圆上顺时针跳,问最少的相遇时间.   这个是同余方程的思路.可列出方程:(m-n)* X% L = y-x(mod L) 简化为 a * x = b (mod L)    (1 ...

  4. atcode E - guruguru（思维+前缀）

    题目链接:http://arc077.contest.atcoder.jp/tasks/arc077_c 题解:一道思维题.不容易想到类似区间求和具体看一下代码. #include <iostr ...

  5. codeforces 799 D. Field expansion（dfs+思维剪枝）

    题目链接:http://codeforces.com/contest/799/problem/D 题意:给出h*w的矩阵,要求经过操作使得h*w的矩阵能够放下a*b的矩阵,操作为:将长或者宽*z[i] ...

  6. Service:让客户端发现pod并与之通信

    5.1.Service介绍 5.1.1.Serice简介 5.1.1.1什么是Service service是k8s中的一个重要概念,主要是提供负载均衡和服务自动发现. Service 是由 kube ...

  7. 【Spring】对持久层技术的整合

    一.持久层技术 二.JdbcTemplate 开发步骤: 1. 导入相关的jar包 2. 配置连接池(数据源) 将参数设置到属性文件中: 3. 创建表 4. 编写实体类 5. Dao层实现 5.1 继 ...

  8. odoo12从零开始：三、2）odoo模型层

    前言 上一篇文章(创建你的第一个应用模块(module))已经大致描述了odoo的模型层(model)和视图层(view),这一篇文章,我们将系统地介绍有关于model的知识,其中包括: 1.模型的类 ...

  9. JAVA之学生信息管理系统

    StudentManager系统 系统的数据: 变量 stunumber 为字符串类型 String,用于存储学生的学号(有 8 位数字组成) 变量 name 为字符串类型 String,用于存储学生 ...

  10. spring boot日志logback输出

    logback是spring boot的官方推荐日志. 1.在代码中使用logback日志: import org.slf4j.Logger; import org.slf4j.LoggerFacto ...