原声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 ...
随机推荐
- Bigcommerce：安装的出错解决方案
我们在本地安装时报错了,具体如下: 1. The database details you entered are incorrect: You have an error in your SQL s ...
- velocity中的velocityCounter不起作用的原因
今天用org.springframework.ui.velocity.VelocityEngineFactoryBean 时,velocityCounter这个变量的时候死活不起作用,折腾了良久也不行 ...
- Java 多线程 （并发）总结
一.概念 1. 维基百科解释 进程是什么? http://zh.wikipedia.org/wiki/%E8%BF%9B%E7%A8%8B 线程是什么? http://zh.wikipedia.org ...
- MFC 单文档中动态添加菜单项和响应菜单事件
新建一个单文档程序 在查看菜单项中增加两个子菜单,分别为隐藏工具栏(ID_HIDE),新建菜单(ID_NEWMENU) 在Resource.h中增加一个ID_NEWMENU宏 #define ID_N ...
- Hibernate4读取Clob数据
package cn.framework.dao.impl; import java.io.BufferedReader; import java.io.IOException; import jav ...
- Android代码混淆和项目宣布步骤记录器
原本放在一起Android项目与发布的文件相混淆.我突然想到,为什么不写博客,分享.有这篇文章的情况下,. Android代码混淆及项目公布步骤记录 一.清理代码中的调试信息,如Log.System. ...
- svn自动备份
#!/bin/sh PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin:~/bin export PATH DATE=` ...
- NSDate的处理：前一天、后一天等关于时区偏移的处理以及在数据库中的使用
看来非常多网上关于日期的处理,今天.昨天.前天.后天.一周等,满心欢喜的拿着去验证结果总是不尽如人意,看别别人的代码看的脑涨.自己就写一个简单的,自己来用,以后用其它的方法,我会在完好,再次记录.以方 ...
- uva--562Dividing coins +dp
题意: 给定一堆硬币,然后将他们分成两部分,使得两部分的差值最小;输出这个最小的差值. 思路: 想了好久都没想到一个合适的状态转移方程.后面看了别人的题解后,才知道能够转成背包问题求解. 我们将全部的 ...
- delphi中用代码实现注册Ocx和Dll（有点怪异，使用CallWindowProc来调用指定函数DllRegisterServer）
在windows系统中,可以通过Regsvr32来实现注册ocx或者dl, 编程时,调用Regsvr32来注册,却不能正常执行.尤其是在Win7系统中,需要管理员身份才能运行. 使用下面的代码则能正常 ...