解決php程式迴圈使用Bootstrap框架排版內容高度無法一致的問題 -教學撰寫:徐嘉裕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 + ')').addBack();

    var sectionheight = new Array();

    $els.each(function() {

      var value = $(this).height();

      sectionheight.push(value);

    });

    var newsectionheight = Math.max.apply(Math, sectionheight);

    $els.css("min-height", newsectionheight);

  })

}

這樣每列的區塊高度都會相等，版面也好看多了，有需要的朋友參考看看!

教學撰寫：徐嘉裕 Neil hsu