欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-25 22:08:20
...
这篇文章介绍使用CSS定位瀑布流简单的实现代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>简单CSS定位瀑布流实现方法</title>
<style type="text/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; }
</style>
</head>

<body>

<!-- content -->
<div class="content" id="content">
    <ul class="case-list" id="case-list">
        <li><img src="1.jpg" alt="" /></li>
        <li><img src="2.jpg" alt="" /></li>
        <li><img src="3.jpg" alt="" /></li>
        <li><img src="4.jpg" alt="" /></li>
        <li><img src="5.jpg" alt="" /></li>
        <li><img src="5.jpg" alt="" /></li>
        <li><img src="7.jpg" alt="" /></li>
        <li><img src="8.jpg" alt="" /></li>
        <li><img src="9.jpg" alt="" /></li>
        <li><img src="10.jpg" alt="" /></li>
        <li><img src="11.jpg" alt="" /></li>
        <li><img src="12.jpg" alt="" /></li>
        <li><img src="13.jpg" alt="" /></li>
        <li><img src="14.jpg" alt="" /></li>
        <li><img src="15.jpg" alt="" /></li>
        <li><img src="16.jpg" alt="" /></li>
        <li><img src="17.jpg" alt="" /></li>
        <li><img src="18.jpg" alt="" /></li>
        <li><img src="19.jpg" alt="" /></li>
        <li><img src="20.jpg" alt="" /></li>
    </ul>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
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>
</body>
</html>

以上就是使用CSS定位瀑布流简单的实现代码的详细内容,更多请关注其它相关文章!

相关标签: CSS定位