原声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 ...
随机推荐
- Android SDK 环境变量配置(Windows)
Android 开发需要进行adb的配置, 这里使用的是 adt-bundle-windows-x86_64-20140321, 里面捆绑的有 eclipse ,不需要再进行 其他的配置,直接下载解压 ...
- faith的23堂课：培养良好的工作方法与做事风格
目标:通过每天一点的学习和实践,逐步形成好的做事风格和工作生活习惯. 方式:每天教一点,实践一点. 第一课 计划与总结,工作日志,戴明环 第二课 目的性:搞清楚,你每个行为的目的 第三课 目标管理,调 ...
- Twenty Newsgroups Classification任务之二seq2sparse（2）
接上篇,SequenceFileTokenizerMapper的输出文件在/home/mahout/mahout-work-mahout0/20news-vectors/tokenized-docum ...
- Ogre嵌入MFC傻瓜全然教程（三）
经过前两两篇博文的解说.我们已经完毕了渲染工作,但仅仅是渲染而没有交互性,本篇博文我们就来加上事件的处理方法. 首先我们须要为项目加入一个帧监听类:CMyFrameListener,为了直观,在这直接 ...
- Delphi引用C对象文件
C语言应用非常广泛,并在世界各地拥有大量的代码库.这些代码库与Delphi的可比性较小,因此如果我们无需转换为Delphi代码而可以直接使用这些库的部分代码就完美了.幸运的是,Delphi允许连接到C ...
- blender资源
blender资源 只能发帖不能更改的百度贴吧贴． http://tieba.baidu.com/f?kw=blender blendercn youku视频专辑: http://i.youku.co ...
- windows程序员进阶系列：《软件调试》之Win32堆的调试支持
Win32堆的调试支持 为了帮助程序员及时发现堆中的问题,堆管理器提供了以下功能来辅助调试. 1:堆尾检查(Heap Tail Check) HTC,在堆尾添加额外的标记信息,用于检测堆块是否溢出. ...
- oracle查询语句中case when的使用
case when语句语法如下: case when 表达式 then valueA else valueB end; 具体使用如下: select (case when a.colum ...
- ThinkPHP框架视图详细介绍 View 视图--模板（九）
原文:ThinkPHP框架视图详细介绍 View 视图--模板(九) 视图也是ThinkPHP使用的核心部分: 一.模板的使用 a.规则 模板文件夹下[TPL]/[分组文件夹/][模板主题文件夹/]和 ...
- mysql+ssh整合样例，附源代码下载
项目引用jar下载:http://download.csdn.net/detail/adam_zs/7262727 项目源代码下载地址:http://download.csdn.net/detail/ ...