快捷導(dǎo)航

bootstrap配合Masonry插件實(shí)現(xiàn)瀑布式布局

更新時(shí)間：2017年01月18日 14:36:46 作者：0day__

這篇文章主要為大家詳細(xì)介紹了bootstrap配合Masonry插件實(shí)現(xiàn)瀑布式布局，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

問(wèn)題是這樣的，使用bootstrap的柵格進(jìn)行布局的時(shí)候，如果大小超過(guò)了，會(huì)自動(dòng)的轉(zhuǎn)到下一行，但是在顯示圖片的時(shí)候就會(huì)出現(xiàn)縫隙，下面介紹masonry進(jìn)行縫隙的填補(bǔ)。

好，下面上貨。

1、首先是html

<html> 
<head> 
 <title>Title</title> 
 <meta charset="utf-8"/> 
 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/> 
 <script type="text/javascript" src="jquery-2.1.4.min.js"></script> 
 <script type="text/javascript" src="bootstrap/masonry-docs.min.js"></script> 
 <script type="text/javascript" src="t.js"></script> 
 <style type="text/css"> 
 .container-fluid { 
 padding: 20px; 
 } 
 .box { 
 margin-bottom: 20px; 
 float: left; 
 width: 220px; 
 } 
 .box img { 
 max-width: 100% 
 } 
 </style> 
</head> 
<body> 
<button class="btn btn-info">123</button> 
<div id="masonry" class="container-fluid"> 
 <div class="box"><img src="img/p1.png">123</div> 
 <div class="box"><img src="img/p2.png">34444444444444444444</div> 
 <div class="box"><img src="img/p3.png">42234234</div> 
 <div class="box"><img src="img/p4.png">234</div> 
 <div class="box"><img src="img/p5.png">22222222222222</div> 
 <div class="box"><img src="img/p6.png">2321213</div> 
</div> 
</body> 
</html>

然后是t.js

$(function() { 
 var $container = $('#masonry'); 
 $container.imagesLoaded(function() { 
 $container.masonry({ 
 itemSelector: '.box', 
 gutter: 20, 
 isAnimated: true, 
 }); 
 }); 
});

最后是效果圖：

調(diào)整瀏覽器大小，讓圖片顯示成三列：

源碼下載：http://xiazai.jb51.net/201701/yuanma/bootstrappubu(jb51.net).rar

參考：http://m.fzitv.net/article/103444.htm

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js+FSO遍歷文件夾下文件并顯示
js+FSO遍歷文件夾下文件并顯示...
2007-03-03
js圖片輪播特效代碼分享
這篇文章主要介紹了js圖片輪播特效，圖片切換效果特別適合做產(chǎn)品演示，感興趣的小伙伴可以參考下
2015-09-09
javascript動(dòng)態(tài)設(shè)置樣式style實(shí)例分析
這篇文章主要介紹了javascript動(dòng)態(tài)設(shè)置樣式style的方法,實(shí)例分析了javascript操作style樣式的易錯(cuò)點(diǎn)和相關(guān)使用技巧,需要的朋友可以參考下
2015-05-05
JS遍歷樹層級(jí)關(guān)系實(shí)現(xiàn)原理解析
這篇文章主要介紹了JS遍歷樹層級(jí)關(guān)系實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08
TreeView 用法（有代碼）（asp.net）
TreeView 用法，后臺(tái)結(jié)合asp.net需要的朋友可以參考下。
2011-07-07
基于JQuery+HTML+JavaScript實(shí)現(xiàn)地圖位置選取和地址模糊查詢
本文詳細(xì)講解了如何使用 JQuery+HTML+JavaScript 實(shí)現(xiàn)移動(dòng)端頁(yè)面中的地圖位置選取功能,本文逐步展示了如何構(gòu)建基本的地圖頁(yè)面,如何通過(guò)點(diǎn)擊地圖獲取經(jīng)緯度和地理信息,以及如何實(shí)現(xiàn)模糊查詢地址并在地圖上標(biāo)注,感興趣的小伙伴跟著小編一起來(lái)看看吧
2024-07-07
JavaScript 截取字符串代碼實(shí)例
這篇文章主要介紹了JavaScript 截取字符串代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
JavaScript防止表單重復(fù)提交的方法
在web開發(fā)中，防止表單的重復(fù)提交是一個(gè)非常重要的環(huán)節(jié)。重復(fù)提交會(huì)導(dǎo)致數(shù)據(jù)混亂，甚至可能導(dǎo)致系統(tǒng)崩潰，今天我們將帶領(lǐng)大家從小白級(jí)別到大神級(jí)別的程序員，一起來(lái)學(xué)習(xí)如何在實(shí)際項(xiàng)目中避免表單的重復(fù)提交
2023-04-04
javascript禁制后退鍵(Backspace)實(shí)例代碼
這篇文章介紹了javascript禁制后退鍵(Backspace)實(shí)例代碼，有需要的朋友可以參考一下
2013-11-11
clipboard.js使用總結(jié)
clipboard.js是一款輕量級(jí)的實(shí)現(xiàn)復(fù)制文本到剪貼板功能的JavaScript插件，本文就詳細(xì)的介紹一下如何使用，感興趣的可以了解一下
2021-11-11