Simple implementation code for positioning waterfall flow using CSS-CSS Tutorial-php.cn

Simple implementation code for positioning waterfall flow using CSS

高洛峰

Release： 2017-03-16 10:27:47

Original

1665 people have browsed it

This article introduces the use of CSS positioningSimple implementation code of waterfall flow

<!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>

Copy after login

The above is the detailed content of Simple implementation code for positioning waterfall flow using CSS. For more information, please follow other related articles on the PHP Chinese website!