原声JS瀑布流加延迟载入
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
*{
margin: 0px;
padding:0px;
}
.box{
position: relative;
top:0px;
}
ul li{
list-style-type: none;
position: absolute;
padding:10px;
width:300px;
border:1px solid #ccc;
-webkit-transition:all .7s ease-out .1s;
-moz-transition:all .7s ease-out .1s;
-o-transition:all .7s ease-out .1s;
transition:all .7s ease-out .1s;
opacity:0;
}
h1{
text-align: center;
}
h1 span{color: #ff0ff0;}
</style>
<script>
document.getElementsByClassName=function(oparent,oclass){
try {
return oparent.querySelectorAll("." + oclass);
} catch (ex){
var reset = [];
var reg = new RegExp("\\b" + oclass + "\\b");
var oCur = oparent.all;
for (var i = 0; i < oCur.length; i++) {
if (reg.test(oCur[i].className)) {
reset.push(oCur[i]);
}
};
return reset;
}
} window.onresize=window.onload=function(){
var obox=document.getElementsByClassName(document,"box")[0];
margin=10;
oli=obox.getElementsByTagName("li");
liWidth=oli[0].offsetWidth+margin;
function show(){
var bodyWidth=document.body.offsetWidth;
columnHeight=[];
/*olight=oli.length;*/
n=parseInt(bodyWidth/liWidth);
columnNum=n==0?1:n;
// console.log(columnNum)
bodyLeft=bodyWidth>=liWidth?bodyWidth-columnNum*liWidth:0;
obox.style.left=parseInt(bodyLeft/2)-(margin/2)+"px";
j=0;
for (var i = 0; i < oli.length; i++) {
if(i<columnNum){
columnHeight[i]=oli[i].offsetHeight+margin;
oli[i].style.left=i*liWidth+"px";
oli[i].style.top=0;
}else{
if(j>=columnHeight.length){
j=0;
}
var imgheight=oli[i].offsetHeight+margin;
oli[i].style.top=columnHeight[j]+"px";
oli[i].style.left=j*liWidth+"px";
columnHeight[j]+=imgheight;
j++;
console.log(j+"J"+oli[i].offsetTop+"和"+ j*liWidth+"I"+i)
} } }
function runing(){
wscrillTop=document.documentElement.scrollTop||document.body.scrollTop;
winH=document.documentElement.clientHeight;
for (var i = 0; i < oli.length; i++) {
var oliheight=oli[i].offsetHeight/3;
scrolltop=(oli[i].getBoundingClientRect().top)+wscrillTop;
if(scrolltop>=wscrillTop&&wscrillTop+winH>scrolltop+oliheight){
oli[i].style.opacity=1;
}
};
}
show();
runing();
window.onscroll=function(){
runing();
}
} </script>
</head>
<body>
<h1>众森美女动漫大集合- <span>延迟载入+瀑布流</span>(缩小扩大窗体有惊喜哦-IE8下面。 360浏览器临时无效，请用chrome看效果。)</h1>
<div class="box">
<ul>
<li><img src="1.jpg" alt="111111"></li>
<li><img src="2.jpg" alt="111111"></li>
<li><img src="3.jpg" alt="111111"></li>
<li><img src="4.jpg" alt="111111"></li>
<li><img src="5.jpg" alt="111111"></li>
<li><img src="6.jpg" alt="111111"></li>
<li><img src="7.jpg" alt="111111"></li>
<li><img src="8.jpg" alt="111111"></li>
<li><img src="9.jpg" alt="111111"></li>
<li><img src="10.jpg" alt="111111"></li>
<li><img src="11.jpg" alt="111111"></li>
<li><img src="12.jpg" alt="111111"></li>
<li><img src="13.jpg" alt="111111"></li>
<li><img src="14.jpg" alt="111111"></li>
<li><img src="15.jpg" alt="111111"></li>
<li><img src="1.jpg" alt="111111"></li>
<li><img src="2.jpg" alt="111111"></li>
<li><img src="3.jpg" alt="111111"></li>
<li><img src="4.jpg" alt="111111"></li>
<li><img src="5.jpg" alt="111111"></li>
<li><img src="6.jpg" alt="111111"></li>
<li><img src="7.jpg" alt="111111"></li>
<li><img src="8.jpg" alt="111111"></li>
<li><img src="9.jpg" alt="111111"></li>
<li><img src="10.jpg" alt="111111"></li>
<li><img src="11.jpg" alt="111111"></li>
<li><img src="12.jpg" alt="111111"></li>
<li><img src="13.jpg" alt="111111"></li>
<li><img src="14.jpg" alt="111111"></li>
<li><img src="15.jpg" alt="111111"></li>
</ul>
</div>
</body>
</html>
宽度固定 这样才干做瀑布流 再用绝对定位进行。第一排的top都等于0 首先用body 的宽度除以1个li的宽度 等到n列 在到第二列開始循环每行的top值 left值和第一排是一样 列数数更具body 的宽度变化而变化 不等于 最低等于1列 用数字保存相应列的li高度。延迟载入在上一篇写过。原理能够看看那边的 。
不懂的能够加我QQ相互探讨：295989501
原声JS瀑布流加延迟载入的更多相关文章
- [JS] 瀑布流加载
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- js图片加载效果（延迟加载+瀑布流加载）
概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...
- js实现瀑布流加载图片效果
今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...
- 面向对象js瀑布流效果
index.html <!doctype html><html lang="en"> <head> <!--网站编码格式,UTF-8 国 ...
- 分享：纯 css 瀑布流 和 js 瀑布流
分享一次纯 css 瀑布流 和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...
- 【js】【图片瀑布流】js瀑布流显示图片20180315
js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...
- WAP用户评论简单实现瀑布流加载
wap端经常会遇到产品或者评论的加载,但是分页的体验不是很好,所以选择通过js实现瀑布流加载方式. 第一步:需要动态加载的主要内容,这里需要动态加载的是li标签的内容 <ul class=&qu ...
- js瀑布流 原理实现揭秘 javascript 原生实现
web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
随机推荐
- lastIndexOf方法——获取字符最后的索引
1.2.20 lastIndexOf方法——获取字符最后的索引 2013-08-29 14:55:18 我来说两句 收藏 我要投稿 本文所属图书 > Java程序开发参考手册 ...
- display:table 水平居中
<div style="width:auto; margin:auto;display:table"> <div style="width: 100px ...
- 一些关于linux 下的jni下问题
编译的细节我就不写了,主要写一些linux下的注意事项,mask一下错误(太多windows的例子了) 编译教程:http://www.cnblogs.com/youxilua/archive/201 ...
- jdom dom4j解析xml不对dtd doctype进行验证(转)
一.写在所有之前:因为dom4j和jdom在这个问题上处理的方法是一模一样的,只是一个是SAXBuilder 一个SAXReader,这里以jdom距离,至于dom4j只需要同理替换一下就可以了.二. ...
- 14.2.5.2 Clustered and Secondary Indexes
14.2.5.2 Clustered and Secondary Indexes : 每个InnoDB 表 有一个特别的索引称为clustered index 行数据存储的地方. 典型的,cluste ...
- SVN的项目管理
基于SVN的项目管理——集中与分散 我们在此处不讨论 GIT 比 SVN 好多少,也不讨论 Maven 和 Gradle 哪个好用,基于现有的开发环境,大多数公司还是采用 SVN + Maven ...
- 初步掌握Yarn的架构及原理（转）
1.YARN 是什么? 从业界使用分布式系统的变化趋势和 hadoop 框架的长远发展来看,MapReduce的 JobTracker/TaskTracker 机制需要大规模的调整来修复它在可扩展性, ...
- 利用jquery+iframe做一个ajax上传效果
以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
- Postfix+Amavisd-new+Spamassassin+ClamAV整合安装
1. 安装软件和依赖包 apt-get install amavisd-new spamassassin clamav-daemon mysql-client mysql-server apt-get ...
- [Erlang危机](5.0)执行时指标
原创文章.转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface . Then, in times of need, it's also po ...