原生Js实现瀑布流

kozyyy

于 2021-05-20 14:39:50 发布

阅读量228

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/jk54546/article/details/117075883

版权

本文详细介绍了如何利用原生JavaScript实现瀑布流布局，包括原理、布局方法、如何封装瀑布流插件以及如何在页面滚动时追加内容。关键点包括计算列数、图片排列和高度调整，以及在内容加载后的定位策略。

摘要由CSDN通过智能技术生成

原理

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

布局

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

最低0.47元/天解锁文章