用jQuery完成瀑布流布局

应用场景说明：

1.利用jQuery框架编写瀑布流布局的代码。

2.应用数据需要通过AJAX向服务器请求数据，数据包括每张图片的宽高的值。

3.布局内容为ul下的若干个li，li中有图片文字等。

4.其中瀑布流的布局中还带滑动窗口自动加载下一页数据。

首先瀑布流布局可以通过纯css样式，利用弹性盒子的效果，先设置固定的列数，然后设置列的排列方式。

但这种方式有个很大的弊端就是会扰乱数据的顺序，导致数据错乱。

接下来我将与大家分享使用js的方法来完成瀑布流的布局。

一、数据渲染

首先，我们要完成的是利用AJAX请求，获取服务器的数据，然后利用数组的map映射方法，将数据渲染到HTML。

这一步，我们需要注意的是，要把从服务器中获取的图片的宽高数据，以内联样式的方法，与HTML一同渲染。

我截取我的部分代码分析。

const { cover, favorite, head_icon, height, name, title, width } = v;

// 1.原始宽高
// 2.显示宽高
const img_w = 242.5; // 显示时的宽
const img_h = (img_w * height) / width; // 显示时的高

return `
<li>
    <div>
        <img style="width:${img_w}px;height:${img_h}px" src="./assets/img/note/${cover}" alt="">
        <div>
            <p&