使用CSS定位瀑布流简单的实现代码

这篇文章介绍使用css定位瀑布流简单的实现代码

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<meta><meta><meta><title>简单CSS定位瀑布流实现方法</title><style>
/* 
 * @name: 
 * @time: 2016-12-07
 * @author: wht
*/
body , html {
    height: 100%;
}
/* basic */
body { background:#f9f9f9; margin:0 auto; font:12px/24px tahoma, Helvetica, Arial; text-align:center; }
body,iframe,div,p,h1,h2,h3,h4,h5,h6,fieldset,ul,dl,dt,dd,form,input,button,textarea,select,i { margin:0px; padding:0px; font-weight:normal; }
ul { list-style:none; overflow:hidden; }
img { border:none; }

/* content */
.content {margin:10px auto; }

/* case-list */
.case-list { margin:0 auto; }
.case-list li { display:block; position:absolute;padding:5px 0; border:1px solid #ddd;border-radius:5px; background-color:#fff;}
.case-list li img { display:block;border-radius:5px;margin-left:5px; }
</style><!-- content --><div>
    <ul>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
    </ul>
</div>
<script></script><script>
window.onload = function(){

    var windowW=$(window).width();
    //console.log(windowW);
    var imgW=$("#case-list li>img").width();
    var hNum=parseInt(windowW/imgW);
    var cases = $("#case-list li");
    var case_h = new Array();
      
    for(var j=0;j<hNum;j++){             
        case_h[j] = new Array();
    }
 

      $.each(cases, function(i){
          
        var hNum=parseInt(windowW/imgW); 
        var m = i%hNum;

        case_h[m].push(cases.eq(i).height());
        var step = Math.floor(i/hNum);  
        cases.eq(i).css("left", (imgW + 10)*m+"px");
    //    console.log(step);
        if(!step){
            cases.eq(i).css("top", "0");
        }else{        
            var num = 0;
            for(var n = 0; n<step;n++){            
                num += case_h[m][n] + 20;
            }    
            cases.eq(i).css("top", num+"px"); 
            
        }
    });
}
</script>

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！