집 > 기사 > 웹 프론트엔드 > CSS를 사용하여 폭포 흐름 위치를 지정하기 위한 간단한 구현 코드

CSS를 사용하여 폭포 흐름 위치를 지정하기 위한 간단한 구현 코드

高洛峰원래의: 2017-03-16 10:27:471736검색

본 글에서는 CSS positioningWaterfall 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>

를 활용한 간단한 구현 코드를 소개합니다.

위 내용은 CSS를 사용하여 폭포 흐름 위치를 지정하기 위한 간단한 구현 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS의 배경 속성에 대한 자세한 설명다음 기사：CSS의 배경 속성에 대한 자세한 설명