原声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 ...
随机推荐
- iOS 使用UIBezierPath类实现随手画画板
在上一篇文章中我介绍了 UIBezierPath类 介绍 ,下面这篇文章介绍一下如何通过这个类实现一个简单的随手画画板的简单程序demo,功能包括:划线(可以调整线条粗细,颜色),撤销笔画,回撤笔画, ...
- zabbix 主机名必须要能ping通
api01:/home/tomcat> cat /etc/hosts 127.0.0.1 localhost ::1 localhost localhost.localdomain localh ...
- 键盘皇者 RealForce 104Pro独家评测
http://tech.sina.cn/?sa=t84d20738943v44&page=2&pwt=rest2&vt=4&from=mbaidu&clickt ...
- hadoop深入研究:(五)——Archives
转载请注明来源地址:http://blog.csdn.net/lastsweetop/article/details/9123155 简介 我们在hadoop深入研究:(一)——hdfs介绍里已讲过, ...
- Swift - 下标脚本方法介绍及实例
定义下标脚本之后,可以使用“[]”来存取数据类型的值. 示例1:实现一个我们自定的字符串类,可以方便的通过索引获取某一个字符值,或某一部分字符串.同时也可以通过索引,给某一部分赋值. 1 2 3 4 ...
- java android面试题分析总结
本文参考多处,一并感谢! http://www.blogjava.net/fanyingjie/archive/2007/06/27/126467.aspx http://baike.baidu.co ...
- vs2008编译QT开源项目三国杀（五篇文章）
请参看 http://tieba.baidu.com/f?kz=1508964881 按照上面的网址教程,下载三国杀源码,swig工具,并下载最新的QT4.8.2 for vs2008.我本机已经安装 ...
- Mac OS提示＃ 14：自己定义文件图标
本教程的其余部分再一次错过了方法,和一些使用提示,做一些额外的,我们希望对大家有帮助. 自己定义图标 对于Mac OSX用户来说,Dashboard,Dock栏,壁纸以及各种键盘触摸板的快 ...
- 字符编码详解 good
字符编码详解 字符编码详解
- JavaScript之面向对象1
学习过Java程序的开发人员都知道面向对象是怎么回事. 面向对象无非就是封装.多态.继承 比如: 声明一个类: class Person{ //私有成员 private String name; pr ...