jQuery plug-in mechanism and waterfall flow layout plug-in writing

1. jQuery plugin mechanism

Used to extend the set of jquery elements to provide new methods (usually used to make plugins)

jQuery defines two methods for customizing plugins

1、 jQuery.fn.extend(object) / $.fn.extend(object)

After registration, use $("selector").func to use, object: used to expand the jquery object

E.g:

//1. $.fn.extend();  利用$("选择器") 调用
$.fn.extend({
    becomeBig: function(){
        //在这里的this是jquery元素
        this.css({"fontSize":"50px"});
        return this;
   }
});

2、jQuery.extend(object) / $.extend(object)

After the registration is completed, use $.func to use, object: used to expand the jquery object

// 2. $.extend();     利用$调用
$.extend({
    becomeBig: function (){
    console.log("我是用$.extend()方法写的jquery插件---becomeBig.js");
    }
});

3. Note:

In order to facilitate the use of the plug-in and clearly know the function of the plug-in, it is recommended to name the custom plug-in: the
format is as follows:

jquery.fn.函数名.js
jquery.函数名.js

Second, the waterfall flow layout plug-in writing

Waterfall layouts can be used for asynchronous interactive fetching of data on the page displayed. The width of each element is the same, but the height varies. Gives a sense of clutter. (The homepage of Dumpang.com adopts the waterfall flow layout)

The waterfall flow layout is shown in the following figure:

1. Introduce the jquery.js file and the waterfall plug-in into the html file

<script src="js/jquery.min.js"></script>
<script src="js/jquery.fn.waterfall.js"></script>

2. Write waterfall plug-in code

Ideas:
1. Using absolute positioning, calculate the top value and left value of each box
2. Find the shortest vertical distance of each column, get the index value of the corresponding column, place the next child element under the column, and then calculate Get the height of the column and assign it to top
3. Since the width is the same, the left value, use the column index value * (width + spacing) to get the corresponding left value
4. Repeat the second point to put all elements Put in

- Get the total width of the parent box, the width of the child box, used to calculate how many elements are placed in a row, and calculate the spacing value

//获取父盒子的宽度，获取子盒子的宽度
var faWidth = $_this.width();
var sonWidth = $_this.children('.item').width();
//计算每行放置几个子盒子(列数不能含小数，采取向下取整)
var column = Math.floor(faWidth/sonWidth);
//计算盒子之间的间距----n个盒子，需要n-1个间距
var autoMargin = (faWidth-sonWidth*column)/(column-1);

• Define an array to hold the height value of each column, find the one with the smallest value in the array, and use it to place the next box

var columnHeight = [];//用来装每行的高度值的数组
for(var a=0;a<column;a++) {
    //给每个元素默认的间距
    columnHeight[a] = autoMargin;
}

• Loop through each element, determine the position of the element, and then determine the top value and left value after determining the position.

$_this.children(".item").each(function(index, ele) {
   //先设index=0的间距是最小的
   var minHeightIndex = 0;
   var maxHeightIndex = 0;
   var minHeight = columnHeight[0];
   //获取当前元素的高度
   var currentHeight = $(this).height();
   //每次要先判断最小的高度，得到它的索引值
   for(var j=0;j<columnHeight.length;j++) {
       if(minHeight>columnHeight[j]) {
           minHeightIndex = j;
           minHeight = columnHeight[j];
       }
   }
    //给该元素的top值和left值
    $(this).css({
       "top":minHeight,
       "left":minHeightIndex*sonWidth+minHeightIndex*autoMargin
    });
    //每列所占高度更新,不仅要加高度，还要加margin，美观
     minHeight += currentHeight;
     minHeight += autoMargin;
     columnHeight[minHeightIndex] = minHeight;
     //比较每列的最高的高度赋值给父盒子
      for(var j=0;j<columnHeight.length;j++) {
          if(columnHeight[maxHeightIndex]<columnHeight[j]) {
              maxHeightIndex = j;
          }
      }
       $_this.height(columnHeight[maxHeightIndex]);
   });
}

Note: (bugs that may appear)

bug：

Because the loading speed of the image is too slow, when the image has not been loaded, and the script may have been executed, the phenomenon of box stacking will occur.
Such as:

Solution:

In order to avoid this from happening, it is recommended to increase the height of the picture first to avoid the phenomenon of box stacking.