瀑布式布局已经成为一种非常流行的图像显示方式，无论是PC机还是移动设备，如手机。这种布局图片样式大致分为三种类型：相同的高度和宽度和宽度不等的高、高的宽度，然后我们以最常见的不平等的高度宽度为例。

我们使用百度图片作为例子：


这是PC侧更常见的瀑布布局，然后我们检查元素来查看百度图片是如何排列的。


正如你所看到的，它实际上是一个集装箱列的宽度，通过计算图片推送到不同的容器，本文介绍的方法是通过定位的方式，虽然最终布局的布局不同，但以前的算法是相似的。

自己动手做

首先，我们将以下几种样式写入身体，然后将盒子浮动到左边：




描述



描述



描述



结果如下：


一、uff1a




无功boxarr = $（'盒子'），
Num = math.floor（document.body.clientwidth / boxarr.eq（0），OuterWidth（真的）），
columnheightarr = { }；
columnheightarr.length =民；
BoxArr.each (function (index, item) {
如果（索引<数字）{
columnheightarr { } =美元指数（项目）OuterHeight（真的）；
{人}
无功minheight = math.min.apply（null，columnheightarr），
minheightindex =美元。内部数组（minheight，columnheightarr）；

$（项目）Css（{
位置：绝对的，
上图：minheight，
左：boxarr.eq（minheightindex）。位置（左）。
}）；
}
}）；




上述代码的目的是：

1、首先，我们计算出浏览器中可以包含多少图片（Num）。注意，这里使用的是边界的高度与宽度，当它被引入真实，它将返回元素包括保证金所有盒模型属性的大小、填充和边框。

2。创建一个数组（columnheightarr）存储每个柱高度、长度为民

3，遍历所有的图片，在柱高度数组存储的第一行的高度（columnheightarr），从第二排，首先计算最小高度（minheight）在所有的栏目中，并与最小高度的柱（minheightindex）。然后画的第二行开始的下方的最低柱的高度，效果如下：


可以看出，虽然位置是正确的，所有的图片都在同一个地方。这是因为我们需要在放置图片后增加列的高度。




无功boxarr = $（'盒子'），
Num = math.floor（document.body.clientwidth / boxarr.eq（0），OuterWidth（真的）），
columnheightarr = { }；
columnheightarr.length =民；

boxarr.each（功能（指标项）{
如果（索引<数字）{
columnheightarr { } =美元指数（项目）OuterHeight（真的）；
其他{ }
无功minheight = math.min.apply（null，columnheightarr），
minheightindex =美元。内部数组（minheight，columnheightarr）；

$（项目）Css（{
位置：绝对的，
上图：minheight，
左：boxarr.eq（minheightindex）。位置（左）。
}）；

columnheightarr { minheightindex } = $（项），OuterHeight（真的）；
}
}）；




结果是正确的：



注：以上代码需要运行在在window.onload方法，因为只有当页面中的图像资源加载，每幅照片的高度将是有效的。

因此，会出现一些严重的问题。当网络不好时，图片不能全部加载，图像显示不完整的情况会不完整。这在移动终端中是显而易见的，当我们加载更多时，判断新添加的图像是否加载更困难。

在实际制作中，在开始时不会出现用HTML编写图片的情况，所以我们通常以以下方式进行：

首先，当我们得到图片地址时，我们还需要得到图片的宽度和高度。这对于服务器后台并不困难。我们可以让后台的兄弟把图片的宽数据和高数据放进JSON，并把它传给你。

*然后介绍一些非常实用的技巧，它可以确保一个元素的大小发生变化，其比例总是一致的，这种技术特别适用于移动端，因为元素通常是响应形式的百分比。

如果手机页面有图片，页面的宽度是屏幕的一半，宽高比是2:1，在任何有区别的手机上都需要保持一致，你怎么做将下列属性设置为元素：


{。箱
宽度：50%；
身高：0；
填充底：100%；
}



而不是设置高度，元素高度是用填充物挤出的，填充的百分比是基于父容器的宽度。填充需要多少它的宽度乘以高度和宽度的比值（宽度和填充值是100%），这就是为什么我们需要得到图片的大小。

uff1a效应


可以看出，在Chrome的手机模拟器ipone4肾6Plus的效果是完全相同的。在手机页面的宽度是固定的，随着网页数量的变化含量高，该技术使用填充元素百分比的值是基于广泛的父容器，高价值和广泛的聪明到相关。

此时，可能有人不禁要问多少有瀑布。简单的一句话，我们要放弃img标签，并使用背景图的方式。为了使用背景图，你必须保持元素的比例始终在画线。

这样，我们可以直接生成与图片比例相同的div，而不必判断图片的加载，然后为其设置背景图，如下所示：


在这里，例如，最外层是220px框的宽度，在宽度的img元素可以是100%，和高度可挤出的填充。

懒加载

使用后台映射的优点是实现延迟加载更为方便，那么延迟加载是什么呢也就是说，当元素在我们看来，我们只能显示图片。滚动时，屏幕下方的图片不显示，可以增加加载速度和体验。

首先，我们将一个框类类名添加到最外层的框中，后者很有用。而不是设置图像的URL的BackgroundImage属性，我们把它分配给自定义属性：数据源。




描述




接下来，我们编写延迟加载函数：




功能lazyload（）{
无功boxarr = $（'。箱项目）；
U3000 U3000
boxarr.each（功能（指标项）{
无功viewtop = $（项）。偏移（）。上至（窗口）ScrollTop（），
imbj = $（项）。找到（img）；

如果（（viewtop $（窗口），ScrollTop（）））{
Imbj.css（'backgroundimage '，'url（+ imbj.attr（数据源）+）），RemoveClass（'data-src）；
$（项），RemoveClass（'box-item）；
}
}）
}




首先，我们把所有have.box-item类名的元素，traversing.viewtop是相对高度图相对于浏览器窗口，类似的位置：固定的意义。

根据条件判断，当图片不在浏览器窗口（上方或下方）时，需要设置背景地图元素的数据SRC值以显示和删除属性。

最外面的元素框项被删除了，因为已经显示的图片不需要进行这些判断，不会删除类名，下次滚动时已经呈现得到的元素，越不需要遍历时间就会变成，这可以起到优化的作用。

当您的元素被追加到页面中时，需要调用该函数，并且在滚动时调用该调用。

LazyLoad（）；

$（窗口）滚动（lazyload）；



轧制负荷

在延迟加载之后，比如滚动负载，所谓滚动负载是当页面滚动到结束时加载一个新图片，我选择滚动到列的高度以加载新的数据，并且您也可以根据自己的喜好做出判断。


功能scrollload（）{
无功viewheight = $（窗口），ScrollTop（）+ $（窗口）Height（），
minheight = math.min.apply（null，columnheightarr）；

如果（viewheight = minheight）{
/ /负载量…
}
}




滚动加载也在窗口滚动事件中进行监控，可以通过延迟加载来执行。


$（窗口）。滚动（函数（）{）
ScrollLoad（）；
LazyLoad（）；
}）；



PC结束后，让我们转到手机。实际上，原理是一样的，只能从多列到固定的两列。




无功boxarr = $（'盒子'），
columnheightarr = { }；
columnheightarr.length = 2；

boxarr.each（功能（指标项）{
如果（索引< 2）{
columnheightarr { } =美元指数（项目）OuterHeight（真的）；
其他{ }
无功minheight = math.min.apply（null，columnheightarr），
minheightindex =美元。内部数组（minheight，columnheightarr）；

$（项目）Css（{
位置：绝对的，
上图：minheight，
左：boxarr.eq（minheightindex）。位置（左）。
}）；

columnheightarr { minheightindex } = $（项），OuterHeight（真的）；
}
}）；



与不同屏幕的手机不同，最外层的盒子的宽度和宽度应设置为百分比。


最后，有一点需要注意，因为我们不使用与百度相同的框，而是使用定位的方式，问题在于图片元素的父级不适合。如果您有相关的需求，我们可以计算所有列中最长的长度，并将值赋给父容器的最小高度属性。

$（'body）。Css（'minheight '，Math.max.apply（null，columnheightarr））；

完整的代码被安排好了，瀑布的完整服务就在这里。




无功dataarr = {
{ PicURL：'。 / / / 1图像资源。JPG，宽度：522，高度：783 }，
{ PicURL：'。 / / / 2图像资源。JPG，宽度：550，高度：786 }，
{ PicURL：'。 / / / 3图像资源。JPG，宽度：535，高度：800 }，
{ PicURL：'。 / / / 4图像资源。JPG，宽度：578，高度：504 }，
{ PicURL：'。 / / / 5图像资源。JPG，宽度：1440，高度：900 }
}；

美元。每个（dataarr，功能（指标项）{
$（）。
+
描述+
'）；
}）；

无功boxarr = $（'盒子'），
Num = math.floor（document.body.clientwidth / boxarr.eq（0），OuterWidth（真的）），
columnheightarr = { }；
columnheightarr.length =民；

排列（）；

$（'body）。Css（'minheight '，Math.max.apply（null，columnheightarr））；

LazyLoad（）；

函数安排（）{
boxarr.each（功能（指标项）{
如果（索引<数字）{
columnheightarr { } =美元指数（项目）OuterHeight（真的）；
{人}
无功minheight = math.min.apply（null，columnheightarr），
minheightindex =美元。内部数组（minheight，columnheightarr）；
$（项目）Css（{
位置：绝对的，
上图：minheight，
左：boxarr.eq（minheightindex）。位置（左）。
}）；
columnheightarr { minheightindex } = $（项），OuterHeight（真的）；
}
}）；
}

功能lazyload（）{
无功boxarr = $（'。箱项目）；
boxarr.each（功能（指标项）{
无功viewtop = $（项）。偏移（）。上至（窗口）ScrollTop（），
imbj = $（项）。找到（img）；
如果（（viewtop $（窗口），ScrollTop（）））{
/ / console.log（$（项），Attr（'data-src '））；
Imbj.css（'backgroundimage '，'url（+ imbj.attr（数据源）+）），RemoveClass（'data-src）；
$（项），RemoveClass（'box-item）；
}
}）
}

功能箱（obj）{
返回obj.height / obj.width；
}

功能scrollload（）{
无功viewheight = $（窗口），ScrollTop（）+ $（窗口）Height（），
minheight = math.min.apply（null，columnheightarr）；
如果（viewheight = minheight）{
/ /负载量…
}
}

$（窗口）。滚动（函数（）{）
LazyLoad（）；
ScrollLoad（）；
}）；



以上是为大家分享jQuery的瀑布布局，内容很丰富，需要一点了解和消化，真正学会应用，希望能对你有所帮助。