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

PHP中文网 • 2025年3月11日 02:15:28 • 编程技术 • 阅读 2

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

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">简单CSS定位瀑布流实现方法/*  * @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; }            
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    
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");                     }    });}