瀑布流布局：

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

①请求图片的接口    地址此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. P2518 [HAOI2010]计数 类似数位dp

    题意 你有一组非零数字(不一定唯一),你可以在其中插入任意个0,这样就可以产生无限个数.比如说给定{1,2},那么可以生成数字12,21,102,120,201,210,1002,1020,等等. 现 ...

  2. CodeForces 931E Game with String

    Game with String 题意:有一个字符串,可以选择从第K位开始,将[K,len(s)-1]的字符都移到前面去,现在给你一个首字母,你可以再选择一位进行观察,然后猜测这个K的值是多少, 现在 ...

  3. 如何将idea工程打包成jar文件

    如何将idea工程打包成jar文件 近日在工作中遇到了一个问题,需要把本地的java文件打成jar包,传到云服务器上运行.于是学习了一下如何在intellij idea中将java工程打成jar包. ...

  4. Webpack安装配置及打包详细过程

    引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...

  5. 小白学Python-S3-day04-用户信息的增删改查、变更权限

    一.用户信息 文件中每一行就是用户的详细信息,每一行是按照冒号为分隔符分成七段 第一段用户名,第二段密码占位符,第三段UID,第四段GID,第五段是描述信息,第六段是家目录.第七段是 是否 可以登录操 ...

  6. git拉取分支

    拉取仓库代码很简单,直接建立连接在pull下来就可以,如果想要拉取仓库中的某一个分支的话,则可能比较麻烦一点,下面简单介绍了一种拉取仓库分支的方法 1.先新建一个项目文件夹 2.git初始化git i ...

  7. 第 15 篇：优化博客功能的细节，提升使用体验—— HelloDjango 系列教程

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 在之前的系列教程中,我们已经实现了:文章的发布.展示.评论等功能,可能认真的小伙伴已经 ...

  8. Collection,泛型,Map

    1.Collection集合 集合和数组的区别? 数组的长度是固定的, 集合的长度是可变的 数组中存储的数据都是同一类型的数据.集合存储的是对象,而且对象的类型可以不一致 集合框架 单列集合 java ...

  9. Mysql高手系列 - 第9篇：详解分组查询，mysql分组有大坑！

    这是Mysql系列第9篇. 环境:mysql5.7.25,cmd命令中进行演示. 本篇内容 分组查询语法 聚合函数 单字段分组 多字段分组 分组前筛选数据 分组后筛选数据 where和having的区 ...

  10. CLR中你想知道的事

    CLR是什么? CLR 公共语言运行时,是一个可由多个语言共同使用的运行环境,核心(内存管理,程序集加载,安全性,异常处理和多线程) Visual Studio是一种编译器,编译器也可称为语法检查器和 ...