js原生瀑布流插件制作

2024-10-02 17:34:31

本文实例为大家分享了js原生瀑布流插件制作的具体代码，供大家参考，具体内容如下

先看效果

和普通的瀑布流是一样的，在调用时制需要传入容器，图片以及图片宽度即可直接生成瀑布流

话不多说，看代码，后面说一下思路

1.html以及调用，其中HTML只需要一行

<body>
    <div class="main"></div>

    <script src="index.js"></script>
    <script>
        // 第一个参数，瀑布流容器
        var dom = document.getElementsByClassName("main")[0];
        // 第二个参数，图片链接，写入一个数组
        var imgArr = ["img/0.jpg","img/45.jpg","img/225.jpg","img/3.png","img/7729.png","img/a.jpg","img/ama.jpg","img/c.png","img/0.jpg","img/3.png","img/45.jpg","img/225.jpg","img/7729.png","img/a.jpg","img/ama.jpg","img/c.png",];
        // 调用插件，传入参数，第三个是图片宽度
        waterFallFlow(dom,imgArr,220);
    </script>
</body>

2.HTML对应的css

.main是传入的容器，其中position: relative;是必须要的

然后.main img{transition: all 0.5s;}是动画代码，给容器内所有图片添加

.main{
    border: 1px solid #ccc;
    width: 90%;
    margin: 0 auto;
    position: relative;
}
.main img{
    transition: all 0.5s;
}

然后是js

/**
 * @param {*} dom 代表瀑布流容器
 * @param {*} imgArr 图片数组
 * @param {*} wid 图片宽度
 */
function waterFallFlow(dom, imgArr, wid) {
    var gap;//间隙
    var colNumber;//列数
    imgDom();
    setImgPos();
    //窗口发生改变的时候
    window.onresize = function(){
        setImgPos();
    }
    /**var timer = null;
     * 上面这么写，丝滑，但是过于影响性能，拖动窗口时
     * 非常非常频繁的调用函数对图片进行重新拍排布
     *
     * 可以这样，防抖
     *
     * window.onresize = function(){
     * if(timer){
     *  clearIntval(timer);
     * }
     *  timer = setTimeout(function(){
     *  setImgPos();
     * },300);
     * }
     *
     */
    // 生成DOM元素
    function imgDom() {
        for (let i = 0; i < imgArr.length; i++) {
            const url = imgArr[i];
            let img = document.createElement("img");
            img.src = url;
            img.style.width = wid + "px";
            img.style.position = "absolute";
            // 所有图片使用绝对定位
            img.style.left = "";
            img.style.top = "";
            img.onload = function(){
                setImgPos();//图片的异步加载
            }
            dom.appendChild(img);
        }
    }
    // 设置每张图片的坐标
    function setImgPos() {
        cal();
        var colY = new Array(colNumber);//存放每一列下一个图片的Y坐标
        colY.fill(0);//填充数组为0
        for (let i = 0; i < dom.children.length; i++) {
            var imgM = dom.children[i];
            var y = Math.min(...colY);//求最小值
            var index = colY.indexOf(y);//第几列
            var x = (index + 1) * gap + index * wid;
            imgM.style.left = x + "px";
            imgM.style.top = y + "px";
            //更新数组
            colY[index] += parseInt(imgM.height)+gap;
        }
        //找到数组中最大的数字，来解决父级div塌陷问题
        var h = Math.max(...colY);
        console.log(h);
        dom.style.height = h + "px";
    }
    // 计算相关数据
    function cal() {
        var containerWidth = parseInt(dom.clientWidth);
        colNumber = Math.floor(containerWidth / wid);//列数
        var space = containerWidth - colNumber * wid;
        gap = space / (colNumber + 1);//计算间隙

    }
}

基本上我都写了注释，都可以看懂

来看思路

1.接受传入的参数，容器，图片数组，图片宽度

2.创建图片元素，添加到对应容器中

3.给每个图片设置宽度，高度自适应，求列数，间距

4.给图片利用绝对定位来排布图片，计算对应的left和top值，也就是对应的x,y坐标

前三步应该没有问题，来看第四步

想法是这样的

主要思路就是寻找最短的一列来排布下一张图片，现在最短出现在第二列

这个时候图片添加到了之前最短的第二列，现在继续寻找最短的一列，继续添加图片

这样此类推完成瀑布流的排布，来看看具体过程

首先计算出一共有几列图片，创建一个长度为列数的数组，全部填充为0，用来后面存放y坐标

遍历容器内子元素，在循环中求出当前数组中最小值以及最小值所在位置（列数）就是y坐标

这个时候就可以求x坐标了

x = （列数+1）* 间距 + 当前列 * 宽度（传入的实参）

这样就有了位置

要注意每次需要更新一下数组，就是修改添加图片位置的y坐标，以及图片的异步加载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

原生JS实现瀑布流插件

瀑布流布局中的图片有一个核心特点-等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探索之旅. 基础功能实现首先我们定义好一个有 20 张图片的容器, <body> <style> #waterfall { position: relative; } .waterfall-box { float: left; width: 200px; } </style> </body> <
前端必备插件之纯原生JS的瀑布流插件Macy.js

这是一款非常轻量级的纯原生JS的瀑布流插件--Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户. 这款流布局JS插件仅有4KB的大小,可以说是非常轻量级的哦.配置也比较方便,用户可以自定义间距.列数,还有个特色就是可以定义不同屏幕分辨率,不同列数,这个应用在响应式网页设计是非常方便的. 所以,选择一款简单易用的瀑布流js插件,可以让前端工程师快速开发出漂亮的瀑布流Pc网站和react 后台项目. 瀑布流布局代表网站就是花瓣网,设计师一定不会陌生的设计网站. 插
js自定义瀑布流布局插件

瀑布流布局是网页中经常采用的一种布局方式,其布局有如下特点: 瀑布流布局特点: (1)图文元素按列排放 (2)列宽一致,但高度不等 (3)布局过程中将优先向高度最小的列补充数据以下是自定义的一个jQuery瀑布流插件:jquery.myWaterfull.js (function ($) { $.fn.extend({ myWaterfull: function () { var parentWidth = $(this).width(); //获取每行的宽度 var childItems =
js原生瀑布流插件制作

本文实例为大家分享了js原生瀑布流插件制作的具体代码,供大家参考,具体内容如下先看效果和普通的瀑布流是一样的,在调用时制需要传入容器,图片以及图片宽度即可直接生成瀑布流话不多说,看代码,后面说一下思路 1.html以及调用,其中HTML只需要一行 <body> <div class="main"></div> <script src="index.js"></script> <script>
JS原生瀑布流效果实现

今天早起看了慕课的瀑布流,的确讲的十分详细,也十分的好,我在博客里也就只能给代码加些注释,和说一下思路.建议大家去看一下慕课的瀑布流教程,非常详细,每一个细节都讲的非常好,只要懂JS的基础代码,看起来应该不是多大问题,里面没有太难得方法,但自己写不出来还是因为思路上有问题,下面就详细说一下几个重点方法的代码,建议大家去慕课详细学习 HTML 和CSS没有太难得地方 <div id="main">//一个main包含了整个页面内容,box用来做一个外容器,img作为图片容器
原生js实现瀑布流效果

本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下 CSS样式: <style> .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 5px;} .imgbox{border: black solid 1px;padding: 5px;border-radius: 5px;} .imgbox img{width: 200px;display: block;} </style>
js实现瀑布流的一种简单方法实例分享

下面奉上一则用JS实现瀑布流的方法,望批评. 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><
JS上传图片预览插件制作（兼容到IE6）

一.实现图片预览的一些方法. 了解了一下,其实方法都是大同小异的.大概有以下几种方式: ①订阅input[type=file]元素的onchange事件. 一旦选择的路径被改变就把图片上传至服务器,然后就返回图片在服务器端的地址,并且赋值到img元素上. 缺点:工作量大,有些上传并不是用户最终需要上传的图片,但是这种方式会把上传过程中选择过的图片都保存至服务器端,会造成资源浪费,而且服务器端清理临时的那些预览图片也需要一定的工作量. ②利用HTML5的新特性FileReader. 这个对象提供了
Vue瀑布流插件的使用示例

我自己写的一个的Vue瀑布流插件,列数自适应,不用设置每个卡片的高度. 测试页面:Page.vue 模板页面:WaterFollow.vue 和 WFColumn.vue 在Page.vue中,修改itemW的值,设置每列的最小宽度.例如:itemW="200"(意为200px).list为数组.高度不用设置,:style="{height:item+'px'}"是我为了创造卡片高度加上去的,不加就显示卡片的原来大小. 经测试,created加载数据正常,mount
通过vue写一个瀑布流插件代码实例

这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下效果如图所示: 采用了预先加载图片,再计算高度的办法..网络差的情况下,可能有点卡新建 vue-water-easy.vue 组件文件 <template> <div class="vue-water-easy" ref="waterWrap"> <div v-for="(i

js原生瀑布流插件制作

相关推荐

随机推荐