Bootstrap3瀑布流排版用JS套件-Masonry-教學撰寫:徐嘉裕Neil hsu

Bootstrap3是一個非常好用的排版線格線統，但如果區塊高度不一致(長短腳)是無法排出瀑布流料果的，會變成下面這樣內容空缺一塊。

解決方法就是使用【Masonry】瀑布流套件整合Bootstrap3版框，問題就能解決。


1、先在頁腳加上以下JS代碼

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
$(function(){
$('.masonry').masonry({
itemSelector: '.item'
});
});
</script>


2、在Bootstrap的class增加紅字的masonry樣式

<div id='videocenterbox'>
<div class="row masonry">
<{foreach item=neilvideoshowbox from=$videoshow.neilvideoshowbox}>
<div class="col-sm-6 col-md-4 item">
<div class="thumbnail">
內容內容內容內容內容內容內容
</div>
</div>
<{/foreach}>
</div>
</div>
masonry加在row後面
item加在col-md-4後面

這樣就OK了，來看一下效果!

長短腳都能填滿版面形成瀑布流排版，Masonry套件好用的地方是能夠完全整合Bootstrap3框架，不用再另外寫一推CSS了，大推~讚~!!

2020/1/13補充

Masonry瀑布流套件如遇圖片太多未全部讀取完成，則區塊會有相疊的情況，解決方法就是在原本Masonry的JS執行區下方再加上imagesLoaded套件即可解決!

<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script>
$(function(){
var $container = $('.masonry');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item'
})

});
});
</script>




教學撰寫：徐嘉裕 Neil hsu