bootstrap配合Masonry插件實現(xiàn)瀑布式布局
更新時間：2017年01月18日 14:36:46 作者：0day__
這篇文章主要為大家詳細介紹了bootstrap配合Masonry插件實現(xiàn)瀑布式布局，具有一定的參考價值，感興趣的小伙伴們可以參考一下
問題是這樣的，使用bootstrap的柵格進行布局的時候，如果大小超過了，會自動的轉(zhuǎn)到下一行，但是在顯示圖片的時候就會出現(xiàn)縫隙，下面介紹masonry進行縫隙的填補。
好，下面上貨。
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://www.fzitv.net/article/103444.htm
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
js+FSO遍歷文件夾下文件并顯示...2007-03-03
這篇文章主要介紹了js圖片輪播特效，圖片切換效果特別適合做產(chǎn)品演示，感興趣的小伙伴可以參考下2015-09-09
javascript動態(tài)設置樣式style實例分析
這篇文章主要介紹了javascript動態(tài)設置樣式style的方法,實例分析了javascript操作style樣式的易錯點和相關使用技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了JS遍歷樹層級關系實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
TreeView 用法，后臺結合asp.net需要的朋友可以參考下。2011-07-07
基于JQuery+HTML+JavaScript實現(xiàn)地圖位置選取和地址模糊查詢
本文詳細講解了如何使用 JQuery+HTML+JavaScript 實現(xiàn)移動端頁面中的地圖位置選取功能,本文逐步展示了如何構建基本的地圖頁面,如何通過點擊地圖獲取經(jīng)緯度和地理信息,以及如何實現(xiàn)模糊查詢地址并在地圖上標注,感興趣的小伙伴跟著小編一起來看看吧2024-07-07
這篇文章主要介紹了JavaScript 截取字符串代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
在web開發(fā)中，防止表單的重復提交是一個非常重要的環(huán)節(jié)。重復提交會導致數(shù)據(jù)混亂，甚至可能導致系統(tǒng)崩潰，今天我們將帶領大家從小白級別到大神級別的程序員，一起來學習如何在實際項目中避免表單的重復提交2023-04-04
javascript禁制后退鍵(Backspace)實例代碼
這篇文章介紹了javascript禁制后退鍵(Backspace)實例代碼，有需要的朋友可以參考一下2013-11-11
clipboard.js是一款輕量級的實現(xiàn)復制文本到剪貼板功能的JavaScript插件，本文就詳細的介紹一下如何使用，感興趣的可以了解一下2021-11-11