jquery移动端瀑布流实现

JQuery是一个非常好用的JavaScript库，可以帮助程序员更加便捷的实现各种功能。而瀑布流是一种非常流行的布局方式，可以应用于不同的场合。下面我们来介绍如何使用JQuery实现移动端瀑布流。

首先，我们需要通过CSS设置好图片宽度和高度以及每个瀑布流的宽度，保证图片在不同的屏幕下都能有良好的显示效果。接下来，我们使用JQuery编写代码实现瀑布流的效果。

//获取页面宽度
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

//获取每个瀑布流元素的宽度
var itemWidth = $('.item').eq(0).width();

//计算每行可以放置几个瀑布流
var colNum = Math.floor(clientWidth/itemWidth);

//定义一个数组，储存每一列的高度
var colHeightArr = [];

//遍历每个瀑布流
$('.item').each(function(index,el) {
  //获取元素高度
  var itemHeight = $(el).height();

  //计算前colNum行最低高度的列数
  var minCol = 0,minColHeight = colHeightArr[0];

  for(var i=0; i
上述代码中，我们首先获取页面宽度和每个瀑布流元素的宽度，然后根据页面宽度和元素宽度计算出每行可以放几个瀑布流。接着，我们定义一个数组colHeightArr，用于存储每一列的高度，初始值都为0。

接下来，我们遍历每个瀑布流元素，计算前colNum行最低高度的列数及高度，然后通过设置元素样式的left和top值来实现瀑布流效果。最后，我们更新列高度数组，将当前元素的高度加到对应列的高度上。

通过以上代码，我们就可以实现移动端瀑布流的效果。JQuery的强大功能可以为我们带来更多的便利和效率，让我们的开发更加高效。