原声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 ...
随机推荐
- 进阶：案例三: Upload File using WebDynpro
1.节点创建,其中DATASOURCE存放uploadfile名称 2.layout布局 3.upload事件代码: method ONACTIONUPLOAD . DATA: lo_Node typ ...
- Python 学习入门（21）—— 线程
本文介绍了Python对于线程的支持,包括“学会”多线程编程需要掌握的基础以及Python两个线程标准库的完整介绍及使用示例. 1. 线程基础 1.1. 线程状态 线程有5种状态,状态转换的过程如下图 ...
- Ubuntu_文件夹名字转化成英文
打开终端命令行输入: export LANG=en_US xdg-user-dirs-gtk-update 之后重启,就看到中文的文件夹变成英文的了 想要换回中文的输入: export LANG=zh ...
- Linux教程:如何在Linux下进行C++开发？
Linux是一类Unix计算机操作系统的统称,Linux操作系统的内核的名字也是“Linux”, 在Linux下进行C++开发,需要注意许多问题,比如:减少不必要的编辑动作,减少编辑的时间. Wind ...
- 在tornado中使用celery实现异步任务处理之中的一个
一.简单介绍 tornado-celery是用于Tornado web框架的非堵塞 celeryclient. 通过tornado-celery能够将耗时任务增加到任务队列中处理, 在celery中创 ...
- 主从mysql 同步设置
GRANT REPLICATION SLAVE ON *.* TO 'root'@'%' IDENTIFIED BY 'zhoubt';grant all privileges on *.* to ...
- 安装Apache Felix OSGI Framework小记
Felix是apache的开源OSGI服务框架,到 http://felix.apache.org/downloads.cgi 可以下载到最新的版本. 解压后目录结构如下: felix-framewo ...
- Spring配置DataSource数据源
在Spring框架中有例如以下3种获得DataSource对象的方法: 1.从JNDI获得DataSource. 2.从第三方的连接池获得DataSource. 3.使用DriverManagerDa ...
- Delaunay三角剖分算法
在图像处理中,经常会使用到三角剖分算法: 具体定义及其算法可以参考:http://baike.so.com/doc/5447649.html 下面放出来代码: Delaunay接口为存C: 测试是使用 ...
- [翻译]利用C#获取终端服务(Terminal Services)会话的闲置时间
[翻译]利用C#获取终端服务(Terminal Services)会话的闲置时间 作者:Tuuzed(土仔) 发表于:2008年2月29日版权声明:可以任意转载,转载时请务必以超链接形式标明文章原 ...