這篇文章給大家分享的是有關(guān)如何使用jquery.masonry實(shí)現(xiàn)瀑布流效果的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)廣州,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):18982081108

一、分別加載jquery插件與jquery.masonry插件

二、瀑布流局部樣式代碼

.container-fluid {
 padding: 20px;
}
.box {
 margin-bottom: 20px;
 float: left;
 width: 220px;
}
.box img {
 max-width: 100%
}

解釋?zhuān)横槍?duì)第二步的頁(yè)面代碼，我們需要添加一點(diǎn)樣式，.box 類(lèi)我們添加了浮動(dòng)屬性，還設(shè)置了他的寬度。

三、頁(yè)面瀑布流布局html代碼