原声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

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试