瀑布流佈局實現程式碼詳解

antzone發表於2017-04-17

原文網址 : https://www.softwhy.com/article-7403-1.html

分享一段程式碼例項，它實現了瀑布流佈局效果。

因為當前瀑布流佈局還是非常流行的，所以對它的良好掌握還是非常有必要的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  background-color: #fff;
  color: #333;
  overflow-x: hidden;
}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend,
button, input, textarea, th, td {
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style: none;
}
.clear {
  clear: both;
  height: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.cle:after, .clearfix:after, .clear_f:after, .cle_float:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.cle, .clearfix, .clear_f, .cle_float {
  zoom: 1;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
a {
  text-decoration: none;
  color: #333;
}
#wrapper {
  width: 1005px;
  margin: 15px auto;
}
/*品牌列表*/
.brand-list {
  width: 1020px;
  overflow: hidden;
}
.brand-list .brand-bd {
  position: relative;
  margin-top: 5px;
}
.brand-list .item {
  position: absolute;
  width: 202px;
  background-color: #f8f8f8;
  border: 1px solid #f8f8f8;
  padding: 18px;
  top: 0;
  left: 40%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.brand-list .hover {
  box-shadow: 0px 1px 8px rgba(200,200,200,.6);
  background-color: #fff;
  border-color: #c8c8c8;
}
.brand-list .additem {
  padding: 0;
  width: 240px;
  border: none;
}
.brand-list .item h3 {
  font-size: 42px;
  color: #666;
  font-family: arial;
  font-weight: bold;
  line-height: .8;
  margin-bottom: 20px;
}
.brand-list .item p {
  margin-bottom: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function() {
  $('#brand-waterfall').waterfall();
});
(function($) {
  $.fn.waterfall = function(options) {
    var df = {
      item: '.item',
      margin: 15,
      addfooter: true
    };
    options = $.extend(df, options);
    return this.each(function() {
      var $box = $(this),
        pos = [],
        _box_width = $box.width(),
        $items = $box.find(options.item),
        _owidth = $items.eq(0).outerWidth() + options.margin,
        _oheight = $items.eq(0).outerHeight() + options.margin,
        _num = Math.floor(_box_width / _owidth);
  
      (function() {
        var index = 0;
        for (; index < _num; index++) {
          pos.push([index * _owidth, 0]);
        }
      })();
  
      $items.each(function() {
        var _this = $(this),
          _temp = 0,
          _height = _this.outerHeight() + options.margin;
  
        _this.hover(function() {
          _this.addClass('hover');
        }, function() {
          _this.removeClass('hover');
        });
  
        for (var j = 0; j < _num; j++) {
          if (pos[j][1] < pos[_temp][1]) {
            _temp = j;
          }
        }
        this.style.cssText = 'left:' + pos[_temp][0] + 'px; top:' + pos[_temp][1] + 'px;';
        pos[_temp][1] = pos[_temp][1] + _height;
      });
  
      // 計算top值最大的賦給外圍div
      (function() {
        var index = 0,
          tops = [];
        for (; index < _num; index++) {
          tops.push(pos[index][1]);
        }
        tops.sort(function(a, b) {
          return a - b;
        });
        $box.height(tops[_num - 1]);
  
        if (options.addfooter) {
          addfooter(tops[_num - 1]);
        }
      })();
  
      function addfooter(max) {
        var addfooter = document.createElement('div');
        addfooter.className = 'item additem';
        for (var index = 0; index < _num; index++) {
          if (max != pos[index][1]) {
            var clone = addfooter.cloneNode(),
              _height = max - pos[index][1] - options.margin;
            clone.style.cssText='left:' + pos[index][0] + 'px; top:'+pos[index][1]+'px; height:'+_height+'px;';
            $box[0].appendChild(clone);
          }
        }
      }
    });
  }
})(jQuery);
</script>
</head>
<body>
  <div id="wrapper">
    <!-- 品牌列表開始 -->
    <div class="brand-list">
      <div class="brand-bd cle" id="brand-waterfall">
        <!-- 迴圈字母模組 item -->
        <div class="item" id="brand-a">
          <h3>A</h3>
          <p><a href="#" target="_blank">螞蟻部落一</a></p>
          <p><a href="#" target="_blank">div教程</a></p>
          <p><a href="#" target="_blank">只有努力才會有美好的未來</a></p>
          <p><a href="#" target="_blank">沒有任何人一開始就是高手</a></p>
          <p><a href="#" target="_blank">本站的url地址是www.softwhy.com</a></p>
          <p><a href="#" target="_blank">javascript教程</a></p>
          <p><a href="#" target="_blank">css教程</a></p>
        </div>
        <div class="item" id="brand-b">
          <h3>B</h3>
          <p><a href="#" target="_blank">螞蟻部落一</a></p>
          <p><a href="#" target="_blank">div教程</a></p>
          <p><a href="#" target="_blank">只有努力才會有美好的未來</a></p>
          <p><a href="#" target="_blank">沒有任何人一開始就是高手</a></p>
          <p><a href="#" target="_blank">本站的url地址是www.softwhy.com</a></p>
          <p><a href="#" target="_blank">javascript教程</a></p>
          <p><a href="#" target="_blank">css教程</a></p>
          <p><a href="#" target="_blank">螞蟻部落一</a></p>
          <p><a href="#" target="_blank">div教程</a></p>
          <p><a href="#" target="_blank">只有努力才會有美好的未來</a></p>
          <p><a href="#" target="_blank">沒有任何人一開始就是高手</a></p>
          <p><a href="#" target="_blank">本站的url地址是www.softwhy.com</a></p>
          <p><a href="#" target="_blank">javascript教程</a></p>
          <p><a href="#" target="_blank">css教程</a></p>
        </div>
        <div class="item" id="brand-c">
          <h3>C</h3>
          <p><a href="#" target="_blank">螞蟻部落一</a></p>
          <p><a href="#" target="_blank">div教程</a></p>
          <p><a href="#" target="_blank">只有努力才會有美好的未來</a></p>
          <p><a href="#" target="_blank">沒有任何人一開始就是高手</a></p>
        </div>
        <div class="item" id="brand-d">
          <h3>D</h3>
          <p><a href="#" target="_blank">div教程</a></p>
          <p><a href="#" target="_blank">只有努力才會有美好的未來</a></p>
          <p><a href="#" target="_blank">沒有任何人一開始就是高手</a></p>
          <p><a href="#" target="_blank">本站的url地址是www.softwhy.com</a></p>
          <p><a href="#" target="_blank">javascript教程</a></p>
          <p><a href="#" target="_blank">css教程</a></p>
        </div>
        <div class="item" id="brand-e">
          <h3>E</h3>
          <p><a href="#" target="_blank">沒有任何人一開始就是高手</a></p>
          <p><a href="#" target="_blank">本站的url地址是www.softwhy.com</a></p>
          <p><a href="#" target="_blank">javascript教程</a></p>
          <p><a href="#" target="_blank">css教程</a></p>
        </div>
        <div class="item" id="brand-f">
          <h3>F</h3>
          <p><a href="#" target="_blank">只有努力才會有美好的未來</a></p>
          <p><a href="#" target="_blank">沒有任何人一開始就是高手</a></p>
          <p><a href="#" target="_blank">本站的url地址是www.softwhy.com</a></p>
          <p><a href="#" target="_blank">javascript教程</a></p>
          <p><a href="#" target="_blank">css教程</a></p>
        </div>
        <div class="item" id="brand-g">
          <h3>G</h3>
          <p><a href="#" target="_blank">css教程</a></p>
          <p><a href="#" target="_blank">螞蟻部落一</a></p>
          <p><a href="#" target="_blank">div教程</a></p>
          <p><a href="#" target="_blank">只有努力才會有美好的未來</a></p>
          <p><a href="#" target="_blank">沒有任何人一開始就是高手</a></p>
          <p><a href="#" target="_blank">本站的url地址是www.softwhy.com</a></p>
          <p><a href="#" target="_blank">javascript教程</a></p>
        </div>
        <div class="item" id="brand-h">
          <h3>H</h3>
          <p><a href="#" target="_blank">css教程</a></p>
          <p><a href="#" target="_blank">螞蟻部落一</a></p>
          <p><a href="#" target="_blank">div教程</a></p>
          <p><a href="#" target="_blank">只有努力才會有美好的未來</a></p>
          <p><a href="#" target="_blank">沒有任何人一開始就是高手</a></p>
          <p><a href="#" target="_blank">本站的url地址是www.softwhy.com</a></p>
          <p><a href="#" target="_blank">javascript教程</a></p>
          <p><a href="#" target="_blank">css教程</a></p>
        </div>
        <div class="item" id="brand-l">
          <h3>L</h3>
          <p><a href="#" target="_blank">螞蟻部落一</a></p>
          <p><a href="#" target="_blank">div教程</a></p>
          <p><a href="#" target="_blank">只有努力才會有美好的未來</a></p>
          <p><a href="#" target="_blank">沒有任何人一開始就是高手</a></p>
          <p><a href="#" target="_blank">本站的url地址是www.softwhy.com</a></p>
          <p><a href="#" target="_blank">javascript教程</a></p>
          <p><a href="#" target="_blank">css教程</a></p>
          <p><a href="#" target="_blank">螞蟻部落一</a></p>
          <p><a href="#" target="_blank">div教程</a></p>
          <p><a href="#" target="_blank">只有努力才會有美好的未來</a></p>
        </div>
        <div class="item" id="brand-m">
          <h3>M</h3>
          <p><a href="#" target="_blank">螞蟻部落一</a></p>
          <p><a href="#" target="_blank">div教程</a></p>
          <p><a href="#" target="_blank">只有努力才會有美好的未來</a></p>
          <p><a href="#" target="_blank">沒有任何人一開始就是高手</a></p>
          <p><a href="#" target="_blank">本站的url地址是www.softwhy.com</a></p>
          <p><a href="#" target="_blank">javascript教程</a></p>
          <p><a href="#" target="_blank">css教程</a></p>
          <p><a href="#" target="_blank">螞蟻部落一</a></p>
          <p><a href="#" target="_blank">div教程</a></p>
        </div>
        <div class="item" id="brand-n">
          <h3>N</h3>
          <p><a href="#" target="_blank">螞蟻部落一</a></p>
          <p><a href="#" target="_blank">div教程</a></p>
          <p><a href="#" target="_blank">只有努力才會有美好的未來</a></p>
          <p><a href="#" target="_blank">沒有任何人一開始就是高手</a></p>
          <p><a href="#" target="_blank">本站的url地址是www.softwhy.com</a></p>
          <p><a href="#" target="_blank">javascript教程</a></p>
          <p><a href="#" target="_blank">css教程</a></p>
          <p><a href="#" target="_blank">螞蟻部落一</a></p>
          <p><a href="#" target="_blank">div教程</a></p>
          <p><a href="#" target="_blank">只有努力才會有美好的未來</a></p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(function() {})，當文件結構完全載入再去執行函式中的程式碼。

（2）.$('#brand-waterfall').waterfall()，實現了瀑布流效果。

（3）.(function($) {})(jQuery)一個匿名自執行函式，傳遞的是一個jQuery物件。

（4）.$.fn.waterfall = function(options) {}，為jquery例項物件新增一個方法，此方法實現了瀑布流效果，引數是一個配置物件。

（5）.var df = {

item: '.item',

margin: 15,

addfooter: true

}，預設的一些配置引數。

item屬性值是一個樣式類；margin規定的是外邊距值；addfooter如果是true則表示瀑布流底部通過新增空元素是底部對齊。

（6）.options = $.extend(df, options)，進行物件合併操作，也就是重新配置引數。

（7）.return this.each(function() {})，進行遍歷操作，之所以前面有return是為了實現鏈式呼叫。

（8）.var $box = $(this)，獲取容器元素物件。

（9）.pos = []，建立一個空陣列，用來儲存元素的left和top屬性值。

（10）._box_width = $box.width()，獲取容器元素的寬度。

（11）.$items = $box.find(options.item)，獲取所有class屬性值為"item"的元素集合。

（12）._owidth = $items.eq(0).outerWidth() + options.margin，獲取第一個元素所佔據的寬度。

（13）._oheight = $items.eq(0).outerHeight() + options.margin，獲取第一個元素所佔據的高度。

（14）._num = Math.floor(_box_width / _owidth)，計算出每一行的列數。

（15）.(function() {

var index = 0;

for (; index < _num; index++) {

pos.push([index * _owidth, 0]);

}

})()，一個匿名自執行函式，通過for迴圈將陣列壓入另一個陣列，子陣列儲存的left和top值，第一行的top值是0。

（16）.$items.each(function() {})，遍歷集合中的每一個元素。

（17）.var _this = $(this)，將當前dom物件轉換為jquery物件。

（18）._temp = 0,宣告一個變數並賦值為0。

（19）._height = _this.outerHeight() + options.margin，獲取當前列下一個元素的top值。

（20）._this.hover(function() {

_this.addClass('hover');

}, function() {

_this.removeClass('hover');

})，當滑鼠懸浮或者離開時新增或者的刪除指定的樣式。

（21）.for (var j = 0; j < _num; j++) {

if (pos[j][1] < pos[_temp][1]) {

_temp = j;

}

}，通過for迴圈獲取top值最小的那列,temp值就是儲存的列的索引。

（22）.this.style.cssText = 'left:' + pos[_temp][0] + 'px; top:' + pos[_temp][1] + 'px;'，將當前元素新增到top最低的列。

（23）.pos[_temp][1] = pos[_temp][1] + _height，更新當前列的下一個元素的top值。

（24）. (function() {})()，一個匿名自執行函式。

（25）.var index = 0，宣告一個變數並賦值為0，後面會用到。

（26）.tops = []，宣告一個空陣列。

（27）.for (; index < _num; index++) {

tops.push(pos[index][1]);

}，將每一個列的最終top值（也就是每一列下一個元素的top值）存入陣列。

（28）.tops.sort(function(a, b) {

return a - b;

})，對陣列進行有小到大排序。

（29）.$box.height(tops[_num - 1])，獲取最高一列的高度。

（30）.if (options.addfooter) {

addfooter(tops[_num - 1]);

}，如果options.addfooter為true，那麼就在底部新增空白元素實現等高。

（31）.function addfooter(max) {}，引數是最高一列的高度值。

（32）.var addfooter = document.createElement('div')，動態建立一個div元素物件。

（33）.addfooter.className = 'item additem'，設定元素的class屬性值。

（34）.for (var index = 0; index < _num; index++) {

if (max != pos[index][1]) {

var clone = addfooter.cloneNode(),

_height = max - pos[index][1] - options.margin;

clone.style.cssText = 'left:' + pos[index][0] + 'px; top:' + pos[index][1] + 'px; height:' + _height + 'px;';

$box[0].appendChild(clone);

}

}，通過for迴圈，將底部參差的部分補全。

二.相關閱讀:

（1）.$.fn可以參閱$.fn作用簡單介紹一章節。

（2）.$.extend()可以參閱jQuery.extend()一章節。

（3）.each()可以參閱jQuery each()一章節。

（4）.find()可以參閱jQuery find()一章節。

（5）.eq()可以參閱jQuery eq()一章節。

（6）.outerWidth()可以參閱jQuery outerWidth()一章節。

（7）.Math.floor()可以參閱javascript Math.floor()一章節。

（8）.push()可以參閱javascript push()一章節。

（9）.cssText可以參閱cssText一章節。

（10）.cloneNode()可以參閱javascript cloneNode()一章節。

（11）.appendChild()可以參閱appendChild()一章節。

jQuery實現瀑布流佈局
2020-06-10
jQuery
原生 js 實現瀑布流佈局、React 版本的瀑布流佈局元件
2022-04-11
JSReact元件
Bootstrap實戰 - 瀑布流佈局
2021-12-05
boot
flutter瀑布流佈局
2024-09-04
Flutter
原生js實現圖片瀑布流佈局，註釋超詳細
2020-06-08
JS
談談實現瀑布流佈局的幾種思路
2019-06-25
淺析瀑布流佈局原理
2023-01-31
CSS3實現瀑布流佈局(display: flex/column-co
2021-09-09
CSSS3Flex
CSS3 column 瀑布流佈局
2019-02-13
CSSS3
網路直播平臺搭建，瀑布流佈局完美解決方案
2024-08-24
vue實現瀑布流
2019-04-01
Vue
css實現瀑布流
2022-03-02
CSS
卡片瀑布流實現
2022-01-05
瀑布流簡單實現
2024-11-16
瀑布流程式碼實現及思路
2019-10-09
記錄：瀑布流最佳實現方案
2024-06-03
Flutter 佈局詳解
2018-05-27
Flutter
CSS3 Flex 彈性佈局例項程式碼詳解
2018-12-18
CSSS3Flex
使用 yogaKit 實現一個資訊流佈局
2018-07-13
java：佈局方法（流佈局）
2020-11-03
Java
Material Design之RecyclerView基本講解與瀑布流的實現
2019-03-02
Material DesignView
純CSS實現瀑布流，你會嗎？
2019-04-01
CSS
微信小程式實戰，基於vue2實現瀑布流
2022-12-01
微信小程式Vue
Android FlexboxLayout 佈局詳解
2018-10-23
AndroidFlex
Flutter佈局篇（1）–水平和垂直佈局詳解
2019-03-03
Flutter
Flutter佈局篇（1）--水平和垂直佈局詳解
2018-10-10
Flutter
小程式簡單實現表格佈局
2019-04-05
Flutter完整開發實戰詳解(十六、詳解自定義佈局實戰)
2019-07-02
Flutter
詳解CSS的Flex佈局
2018-12-13
CSSFlex
Flutter Container Widget 佈局詳解
2018-09-19
FlutterAI
Flutter 佈局（一）- Container詳解
2018-06-03
FlutterAI
詳解RecyclerView的預佈局
2023-10-07
View
【瀑布流】
2020-12-13
在鴻蒙中實現類似瀑布流效果
2021-05-27
鴻蒙
佈局總結-水平居中佈局的實現
2019-02-16
30 Seconds of CSS程式碼塊解讀(佈局篇)
2021-09-09
CSS
iOS自動佈局——Masonry詳解
2018-10-30
iOS
CSS例項詳解：Flex佈局
2018-12-17
CSSFlex
Flutter 佈局（七）- Row、Column詳解
2018-08-01
Flutter

瀑布流佈局實現程式碼詳解

相關文章