原声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.οnresize=window.οnlοad=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.οnscrοll=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

dome

原声JS瀑布流加延迟载入相关推荐

原声JS瀑布流加延迟加载
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
js图片加载效果（延迟加载+瀑布流加载）
概述两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果详细代码下载:http://www.demodash ...
微信小程序--瀑布流加载
本文主要介绍小程序的瀑布流加载.实现的原理是,通过bindload监听图片加载,然后计算每张图片的高度,将list根据高度分别,创建2个新数组col1.col2. 1..xml <view cl ...
照片墙瀑布流加载与阻止加载
网上大部分主流的瀑布流应用基本都是由后端在提供图片地址的同时提供图片宽高,这样,前端不必等待图片渲染完成,可以根据图片的宽高先把装载图片的容器或父节点先放上页面,完成基础性的布局,再让图片以渐变或其他 ...
这是用原声js编写的地址选择器,使用select编写的三联选择器
这是用原声js编写的地址选择器,使用select编写的三联选择器 <!DOCTYPE html> <html lang="en"> <head> ...
图片瀑布流加载和购物车
图片瀑布流加载注释中为详细注释动态添加元素 // 创建图片数组方便后续添加图片路径时使用var img = ["1.jpg", "2.jpg", " ...
（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/
(常用代码)原声JS 实现倒计时的效果.分/秒/毫秒/ 第一步:构建HTML 结构和样式  <div class="timing" ...
## 原声js制作简单灯光开关
标签代码:html部分: 开灯关灯 Css样式: #left,#right{ border-radius: 50%; color: red; line-height: 30px; width: 40 ...
js结合jquery实现的ajax瀑布流加载实例
一.js代码 ajax函数 //瀑布流数据 var getData = function (i,url,name){$.post(url,{p:i},function(data){if(data.st ...

原声JS瀑布流加延迟载入

原声JS瀑布流加延迟载入相关推荐

最新文章

热门文章