css3多列及瀑布流效果範例程式碼

這篇文章介紹css3多列及瀑布流效果範例程式碼

css3內容分塊，多列效果(類似報紙版塊排版):

.p02{    /*count:内容分为几列，gap:内容与分割线的距离，rule:分割线样式*/
    column-count:4;
    column-gap:30px;
    column-rule:5px outset #ff0000;
    -webkit-column-count: 4;
    -webkit-column-gap: 30px;
    -webkit-column-rule: 5px outset #ff0000;
}

#css3實作圖片瀑布流排版:

.container {
    column-width: 350px;
    -webkit-column-width: 350px;
    column-gap: 5px;
    -webkit-column-gap: 5px;
}img {
    width: 400px;
}.container p {
    width: 350px;
    margin: 5px;
}p {
    text-align: center;
}

#瀑布流效果html程式碼如下:

nbsp;html>
    
        <meta>
        <title></title>
        <link>
    
    
        <p>
            </p><p><img  src="/static/imghwm/default1.png" data-src="../../image/5.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/2.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p><p>文字描述</p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/5.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/2.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/5.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p><p>文字描述</p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/3.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/5.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/5.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/3.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/5.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/5.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p><p>文字描述</p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/5.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/5.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/5.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/5.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p><p>文字描述</p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/5.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p>
            <p><img  src="/static/imghwm/default1.png" data-src="../../image/5.jpg" class="lazy" alt="css3多列及瀑布流效果範例程式碼" ></p>
        
    

 

以上是css3多列及瀑布流效果範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！