Bootstrap響應式布局瀑布流

 

瀑布流最常用的插件莫屬Masonry。它通過將不同高度的內容排列組合在最佳的位置，就像砌牆一樣從上到下無縫的組合在一起。

Bootstrap是當下比較熱門的web前端開發框架之一，通過引入Bootstrap，你可以很快的給你的項目做一個自適應的頁面。

為什么需要Masonry

在某些項目中，我們可能需要展示一些產品、主題或者項目等，通過網格的形式排列在一起，由於每個內容的高度可能無法一樣高，這個時候我們會看到頁面做出來是下面這樣子的：

如上，我們看到不同的高度內容導致一些地方是空的，破壞了整體的布局。

這就是我們為什么需要引入Masonry這個插件的原因，它使得內容像魔術一樣自動填充空白的地方。下面這個就是我們想要的內容了。

演示案例

本案例中使用到了Bootstrap的網格系統和縮略圖的樣式，並引入了標簽選項卡的樣式。

每個網格的代碼：

<div class="col-md-4 col-sm-6 item">
<div class="thumbnail">
<img src="http://lorempixel.com/200/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div><!--/.item -->
標簽選項卡的代碼：

//code from http://caibaojian.com/bootstrap-mosonry.html
<div role="tabpanel">

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#panel-1" aria-controls="panel-1" role="tab" data-toggle="tab">Panel 1</a>
</li>
<li role="presentation">
<a href="#panel-2" aria-controls="panel-2" role="tab" data-toggle="tab">Panel 2</a>
</li>
<li role="presentation">
<a href="#panel-3" aria-controls="panel-3" role="tab" data-toggle="tab">Panel 3</a>
</li>
<li role="presentation">
<a href="#panel-4" aria-controls="panel-4" role="tab" data-toggle="tab">Panel 4</a>
</li>
</ul>

<!-- Tab panels -->
<div class="tab-content">

<div role="tabpanel" class="tab-pane active" id="panel-1">
<div class="row masonry-container">

<div class="col-md-4 col-sm-6 item">
<!-- Thumbnail goes here -->
</div>

<div class="col-md-4 col-sm-6 item">
<!-- Thumbnail goes here -->
</div>

<div class="col-md-4 col-sm-6 item">
<!-- Thumbnail goes here -->
</div>
...
</div><!--End masonry-container -->
</div><!--End panel-1 -->
<div role="tabpanel" class="tab-pane" id="panel-2">
<!-- Same as what goes inside panel-1 -->
</div><!--End panel-2 -->
...
</div><!--End tab-content -->
</div><!--End tabpanel -->

 

引入Masonry庫

你可以添加 Masonry庫，考慮到圖片出錯時，可能會破壞布局，可以引入 imagesLoaded插件，下面這段代碼就是imagesLoaded的代碼

var $container = $('.masonry-container');
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: '.item',
itemSelector: '.item'
});
});

 

當內容是隱藏時，進入不會自動布局，當我們使用選項卡是，其他標簽頁是隱藏的，這是我們要重新調用上面的代碼。

//Reinitialize masonry inside each panel after the relative tab link is clicked -
$('a[data-toggle=tab]').each(function () {
var $this = $(this);

$this.on('shown.bs.tab', function () {

$container.imagesLoaded( function () {
$container.masonry({
columnWidth: '.item',
itemSelector: '.item'
});
});

}); //end shown
}); //end each

 

 

本地演示

 

原文鏈接：http://caibaojian.com/bootstrap-mosonry.html