原聲JS瀑布流加消極式載入，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
dome
$().ready(function(){
$.getScript("xxx.js");
});
請注意這裡是載入並執行 換句話說js方法要寫成註冊式的
var text=function(){}
而 function text(){} 不行
js 代碼消極式載入
<script type="text/javascript">
setTimeout('check()',3000) //1秒=1000，這裡是3秒
function check()
{
if (!window.ActiveXObject){alert('由於播放器相容原因，請使用ie核心瀏覽器（例如：IE，360瀏覽器，搜狗瀏覽器 等）');}
}
</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
