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 sr...