徐嘉裕(Neil Hsu)的工作心得網誌!

使用Bootstrap框架排版來跑php迴圈，除非是要做瀑布流，一定會遇到以下的問題，就是每個div的高度都不一致，導致區塊跑位的情況 這樣不是很奇怪嗎?解決方法就使用js的each取得nth-child引響範圍內區塊高度的最大值，再輸出到範圍內的全部區塊，例如每列有三個區塊，迴圈跑三次共三列，程式就會以每三個區塊取值比對一次抓出最大高度在輸出，這樣每一列的高度都會一致，不會再發生區塊跑位的情況。 方法如下： html結構 <div class="row">   <div class="col-md-4">.col-md-4</div>   <div class="col-md-4">.col-md-4</div>  <div class="col-md-4">.col-md-4</div>   <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> 呼叫function <script>sameheightfunction();</script> js-code 吧以下的code放在頁面引入的js檔中 //區塊高度相等 function sameheightfunction() {   var $column=3; //欄位數   var $range = $column - 1;   var $sections = $('.col-md-4');  //區塊class   $sections.filter(':nth-child(' + $column + 'n-' + $range + ')').each(function() {     var $this = $(this),       $els = $this.nextAll(':lt(' + $range + ')...

之前寫過一篇【Bootstrap3瀑布流排版用JS套件-Masonry-教學】 https://neohsuxoops.blogspot.com/2019/08/bootstrap3js-masonry.html 不過這方法只能用在已讀出的資料樣板排版上，例如PHP讀出50筆，然後可以用這個方法來做瀑布流排版，但如果要應用在AJAX上則需要再做修改才能應用。 例如像 pinterest 網站，預設資料只出現幾筆，然後瀏覽器卷軸到底之後又會出現資料，一直循環開啟到資料全部讀完，以AJAX非同步方式求取資料的瀑布流效果。 AJAX結構跟運作原理就不多說了，這裡直接是masonry套件+imagesloaded套件在AJAX中的應用方式，CODE如下。 1、先在樣板裡面引入三支檔 <script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="js/masonryajaxjs.js"></script> //此為呼叫AJAX的JS檔需自行建立 2、在樣板上貼上以下的function，放在三個引入檔的下方 <script> function masonryfunction(){ $('.masonry').imagesLoaded(function() { var msnry = new Masonry(".masonry",{  itemSelector: '.item', columnWidth: <{$enshow.columnWidth}>,   //單個物件寬度 gutter: <{$enshow.gutter}>,   //物件邊距 isFitWidth: true...

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