首先一個頁面的佈局

<div id="container-pro">
    <div class="waterfall">
       <div class="item"><img src="img/1.jpg"></div>
       <div class="item"><img src="img/2.jpg"></div>
       <div class="item"><img src="img/3.jpg"></div>
       <div class="item"><img src="img/1.jpg"></div>
       <div class="item"><img src="img/2.jpg"></div>
       <div class="item"><img src="img/3.jpg"></div>
       <div class="item"><img src="img/1.jpg"></div>
       <div class="item"><img src="img/2.jpg"></div>
       <div class="item"><img src="img/3.jpg"></div>
       <div class="item"><img src="img/1.jpg"></div>
       <div class="item"><img src="img/2.jpg"></div>
       <div class="item"><img src="img/3.jpg"></div>
       <div class="item"><img src="img/1.jpg"></div>
       <div class="item"><img src="img/2.jpg"></div>
       <div class="item"><img src="img/3.jpg"></div>

    </div>
</div>
 

然後就是css啦

/*大層*/
#container-pro {
    width: 100%;
    margin: 0 auto;
}


/*瀑布流層*/
#container-pro .waterfall {
    -moz-column-count: 3; /* Firefox */
    -webkit-column-count: 3; /* Safari 和 Chrome */
    column-count: 3;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}


/*一個內容層*/
#container-pro .item {
    /*padding: 1em;*/
    margin: 0 0 1em 0;
    -moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}


#container-pro .item img {
    width: 100%;
    margin-bottom: 10px
}


 

就這麼簡單，試試吧

如需轉載，請註明出處：https://blog.csdn.net/qq_36208461/article/details/80617746