为了便于大家理解我使用了jQuery.当然用源生js代码执行的效率会高一些，但是很多人多源生js不是很熟练
代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery随机图片瀑布流无限加载</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* container *
瀑布流布局，也称为Masonry布局，是一种网页布局方式，常用于展示图片，使得页面看起来像瀑布一样，每一列图片自上而下排列，不同列的图片底部对齐。这种布局方式可以有效地利用屏幕空间，视觉效果独特。在本示例中，我们将探讨如何使用jQuery实现一个简单的随机图片瀑布流效果。
HTML结构是基础，它包含了一个ID为`container`的容器，以及若干个`class="col"`的`<ul>`列表，这些列表元素用于存放图片。每个`<li>`列表项内包含一张图片`<img>`。初始状态下，只加载了几张图片，后续将通过JavaScript动态加载更多。
接下来，CSS样式用于设置页面的基本样式和布局。`#container`设置了宽度和居中对齐，`#container ul`设置了每列的宽度、浮动和右边距，`#container ul li`设置了图片之间的间距，以及图片的宽度。
jQuery部分是核心，首先引入了jQuery库。`$(function(){...})`是jQuery的文档就绪事件，确保在DOM加载完成后执行内部代码。这里定义了两个函数：`loadMeinv()`和`getMinUl()`。
`loadMeinv()`函数用于加载随机图片。在这个函数中，通过循环生成随机数据，模拟加载不同的图片。使用`Math.random()`生成0到9之间的随机数，然后拼接成图片的URL。通过`$minUl.append(html)`将新的图片元素添加到当前最短的`<ul>`中。
`getMinUl()`函数用于找到当前最短的`<ul>`。这个函数遍历所有`.col`类的`<ul>`元素，比较它们的高度，返回高度最小的那个。这个功能是实现瀑布流的关键，确保新的图片总是添加到最短的列，以保持布局的平衡。
当用户滚动窗口时，通过监听`scroll`事件来判断是否需要加载更多图片。如果最短的`<ul>`的高度小于或等于窗口滚动后的可见高度加上窗口高度，那么调用`loadMeinv()`函数加载新图片。
这个示例展示了如何利用jQuery实现一个基本的随机图片瀑布流布局。它利用了JavaScript事件监听和DOM操作，实现了动态加载和布局调整，为用户提供了流畅的浏览体验。虽然这个例子使用了jQuery，但对于性能敏感的应用，使用原生JavaScript可能会更高效。然而，jQuery提供了更为简洁的API，对于不熟悉原生JavaScript的开发者来说，是一个很好的选择。
