Heim > Artikel > Web-Frontend > Einfacher Implementierungscode zur Positionierung des Wasserfallflusses mithilfe von CSS

Einfacher Implementierungscode zur Positionierung des Wasserfallflusses mithilfe von CSS

高洛峰Original: 2017-03-16 10:27:471736Durchsuche

In diesem Artikel wird der einfache Implementierungscode für die Verwendung von CSS-PositionierungWasserfallfluss

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

vorgestellt

Das obige ist der detaillierte Inhalt vonEinfacher Implementierungscode zur Positionierung des Wasserfallflusses mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Hintergrundeigenschaft von CSSNächster Artikel：Detaillierte Erläuterung der Hintergrundeigenschaft von CSS

In Verbindung stehende Artikel

Mehr sehen