瀑布流实例及懒加载（echo.js）
瀑布流布局：
图片等宽，不定高，按最低高度来顺序排列；实现方法：获取每次获取四行中最低高度对应的一行，将下一张加载的图片放在该位置，每次加载前都获取最低高度；
①请求图片的接口 地址此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）的更多相关文章
- js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...
- 图片懒加载 echo.js
(function (root, factory) { if (typeof define === 'function' && define.amd) { define(functio ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- js原生图片懒加载 或 js原生图片预加载，html标签自定义属性
使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...
- 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
- 图片懒加载lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
- 类似懒加载的js功能
<!-- 显示15条数据 --> <ul class="list" pagesize="15"> <li> <div ...
- 图片懒加载--lazyload.js的用法
这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...
- 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据
瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...
随机推荐
- HDU2767Proving Equivalences tarjan缩点，如何求入度和出度最大值
给定一个有向图,问最少增加多少条边后变成强连通图 tarjan求求强连通分量并缩点,如果强连通分量个数为1,则需要边数为0, 否则为缩点后点入度和出度的最大值, 证明:当入度或者出度不为0时 ...
- codeforces 486 E. LIS of Sequence（dp）
题目链接:http://codeforces.com/contest/486/problem/E 题意:给出n个数,如果一个数满足不属于最长递增序列,那么输出1,如果属于最长递增序列但是不属于所有最长 ...
- 企查猫app数据解密
通过最近几天的对企查猫的研究,目前已经成功将企查猫的数据加密和响应数据加密完成解密. 和之前对启信宝APP的数据解密操作基本一样,不过企查猫对请求和响应都使用aes加密了,抓包的时候可以看到,具体可以 ...
- 阿里短信封装SDK TP3.2
1.阿里短信接口需要企业认证: 2.短信需要短信模板 <?php /** * 阿里云短信验证码发送类 * @param string $accessKeyId key * @param stri ...
- ajax 发送json数据时为什么需要设置contentType: "application/json”
1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别? contentType: "application/j ...
- ORM之Dapper运用
一.前言 上一篇[分层架构设计]我们已经有了架构的轮廓,现在我们就在这个轮廓里面造轮子.项目要想开始,肯定先得确定ORM框架,目前市面上的ORM框架有很多,对于.net人员来说很容易就想到以ADO.N ...
- iOS -打包上传成功，在"构建版本"一直刷不出来
今天提交版本到appstore,构建版本一直不出来,等了一天也没有出来,其实就是权限问题,iOS13 来了,所以面临的问题随之而来,苹果给邮箱发了这段话: Dear Developer,We iden ...
- centos C++ ccache llvm编译环境配置
下载ccache rpm包wget https://centos.pkgs.org/6/epel-x86_64/ccache-3.1.6-2.el6.x86_64.rpm.htmlyum -y ins ...
- elasticsearch倒排索引与TF-IDF算法
elasticsearch专栏:https://www.cnblogs.com/hello-shf/category/1550315.html 一.倒排索引(Inverted Index)简介 在关系 ...
- 常用HBase操作
HBase是一个分布式.面向列的数据库,可以用来存储非结构化和半结构化的松散数据,具有高可靠.高性能.面向列.可伸缩的特性.通过行键(RowKey).列族(ColumnFamily).列(Column ...