原生Js实现瀑布流

原理

1. 瀑布流图片：每列图片的宽度必须一致
2. 瀑布流列数：列数=父容器的宽度/图片宽度
3. 瀑布流总高度：其中一个列高度的最大值
4. 瀑布流排列：图片加载完成后排列，所加载的图片依次定位在最小列数的下面

布局

1. HTML

<div class="container">
    

2. CSS

items进行相对定位

item小盒子进行绝对定位

图片img设置display：block，取消图片间隙

鼠标触发效果：

item：hover{
    box-shadow:0 1px 3px rgba(0,0,0,0.02),0 16px 32px -4px rgba(0,0,0,0.17);
    transform:translateY(-1px)
}

封装瀑布流插件

1. 封装插件

;(function($){
    $.fn.waterFall = function(){
        //封装的代码
    }
})(jQuery);

2. 编写代码

//声明一个变量，用来给每一个图片盒子设置属性
var defaults = {
    //图片间距
    gap：15
};
//通过$.extend（）进行拓展
defaults = $.extend(defaults);
//找到每个图片盒子元素；
<!---->
var $this = $(this);
var item