移动端三合一瀑布流插件（原生JS）

Posted 2020-07-26 Daryl

没有前言，先上DEMO（手机上看效果更佳）和 原码。

 

瀑布流形式的图片布局方式在手机等移动端设备上运用广泛，比较常见的是下面前两种：

一、等宽等高

这种形式实现起来非常容易，这里就不再多说。

 

二、等宽不等高

这种形式算是比较正统的瀑布流布局形式，关于如何实现的请参考之前的一篇博文——jQuery瀑布流详解。

 

三、等高不等宽

在之前的工作中接触到了这种形式的瀑布流，它的主要特点是：同一行的两张图片高度相等，宽度不等，且宽高比与原图近乎一致（没有拉伸变形）。但是不同行的图片高度不一定相等，下面就介绍下它的实现方式。

这里先说一组中两张图片的比例算法。

首先，还是需要两张图片的宽和高或者高宽比，比如一张是高宽比比较大（瘦）的图，另一张是高宽比比较小（胖）的图。

如果两张图片最终需要并列在同一行，并且拥有相同的高度，那么图片所占该行的宽度，就与其高宽比成反比。即瘦的图占宽度小，胖的图占宽度多。

举个例子：

左图高宽比为2:1 (2)，右图高宽比为1:2 (0.5)

他们的高宽比之和为2.5，那么左图的宽度比应该是较少的那部分 (0.5 / 2.5)，右图的宽度比应该是较多的那部分 (2 / 2.5)。

也就是左图宽应为容器的五分之一，右图为五分之四。

那么高度就是图片的宽度乘以其高宽比，为了响应式这里都不使用像素而使用百分比，为了使高度与宽度保持比例，所以不使用 height，而用 padding-bottom 挤出来。原理见jQuery瀑布流详解。

正确结果：

下面我们通过一个实际的例子来试验下这个算法：

左图的尺寸为 480*800，右图的尺寸为 500*311。

主要阐述下算法，代码表达个大意：

var rate1 = 800 / 480,    
    rate2 = 311 / 500,    
    totalRate = rate1 + rate2,
    width1 = rate2 / totalRate * 100, // 27.2
    width2 = rate1 / totalRate * 100, // 72.8
    height = width1 * rate1;

return \'<div style="width: \'+width1+\'%; padding-bottom: \'+height+\'%"></div>\'+
　　　　\'<div style="width: \'+width2+\'%; padding-bottom: \'+height+\'%"></div>\';

即左图占72.2%，右图占72.8%。高度因为一致，只用计算其中一个就好。看下结果：

破费？还没，我们需要两张图之间有个间隙，假如这个间隙为容器宽度的2%

width1 = rate2 / totalRate * 98;
width2 = rate1 / totalRate * 98;

这样在计算两张图所占宽度比的时候就会先减去间隙，间隙的生成可以设置左图的 margin-right，也可以直接将右图向右浮动。

 

由于该插件是基于原生 javascript，所以我们得实现几个 jQuery 中的函数。

选择器

因为该插件的选择器唯一作用就是选中容器元素，所以只实现一个简易版的即可。

function selector(ele) {
    if (!ele) {
        return;
    }
    return document.querySelector(ele);
}

extend函数

该方法是用来合并对象的，在插件中它的主要作用是合并参数，将使用者传入的参数覆盖默认参数。

function extend() {
　　var args = Array.prototype.slice.call(arguments),
　　　　 len = args.length,
　　　　 obj = null, i;

　　for (i = 0; i < len; i ++) {
　　　　if (typeof(args[i]) !== \'object\') {
　　　　　　break;
　　　　}
　　　　if (i !== 0) {
　　　　　　for (var o in args[i]) {
　　　　　　　　if (args[i].hasOwnProperty(o)) obj[o] = args[i][o];
　　　　　　}
　　　　} else {
　　　　　　obj = args[0];
　　　　}
　　}

　　return obj;
}

var result = extend({color: red}, {color: blue});
console.log(result); // {color: blue}

 

调用方法

1. 引入 wf.css 和 wf.js 文件。

2. 通过 WaterFall 构造函数实例化，通过 create 方法生成瀑布流。

var waterFall = new WaterFall(\'.content\', {
    type: 2,
    urlField: \'picUrl\'
});
waterFall.create(dataArr);

由于 create 方法实际是通过 appendChild 来添加DOM元素的，所以分页加载时只需要再次调用create方法并传入新的数据即可。

3. 插件支持AMD等模块化引用。

 

参数 (param)

type —— 瀑布流类型，默认1

1：等高等宽型，2：等宽型，3：等高型

urlField —— json中图片地址的字段，默认为 \'url\'。比如你接收到的数据中字段叫 \'picUrl\', 传入该值会使对象的属性名进行映射，下同

widthField —— json中宽度的字段，默认为 \'width\'

HeightField —— json中高度的字段，默认为 \'height\'

 

PS：TI6 西恩刀塔加油，小红本我就不买了：)