jQuery 瀑布流绝对定位布局（二）(延迟AJAX加载图片)

jQuery 瀑布流绝对定位布局（二）(延迟AJAX加载图片)_jquery

WBOY

发布： 2016-05-16 17:53:17

原创

1210 人浏览过

瀑布流-绝对定位布局，与浮动布局的区别在于

1.布局不一样：
　　绝对定位：一个UL里面放置所有的绝对定位的LI；
　　浮动布局：多个（一般三四个）UL分布放置LI；
2.AJAX不一样
　　绝对定位：只需要将请求来的JSON数据（当然可以是别的格式的数据），插入到UL就可以了。然后再对这个新插入的LI进行TOP和LEFT设置；
　　浮动布置：是将请求来的JSON数据（当然可以是别的格式的数据），分别插入到对应的UL当中，因为有绝对定位，所以不用对LI设置位置。会自动向下排列；

一、功能分析：

　　1.定位每一个LI，即设置每一个LI的TOP和LEFT值；
　　2.将AJAX的数据，放在LI中，插入到UL当中；

二、实现过程：

　　1.设置LI的LEFT；
　　　　在那一列？有了列数再乘以每个LI的宽度，就可以确定LEFT值
　　　　找规律：
　　　　现在我需要三列，那么每一列当中的LI，都有一个共同的列号（自己设置0.1.2或者A.B.C，总之自己对这三列给一个标识）这里设为
　　　　0号第一列
　　　　1号第二列
　　　　2号第三列
　　　　所以每一行，只能放三个LI
　　　　第一个li 在 0号第二个li 在 1号第三个li 在 2号
　　　　第四个li 在 0号第五个li 在 1号第六个li 在 2号
　　　　所以想到用索引取模,正好可以得出0 1 2 ，0 1 2 ……
　　　　通过这个我们就可以判断LI在那一列；
　　　　index%3 = 0 1 2 ，0 1 2 ……
　　　　为什么要模3,因为要得出三个数的循环。所以以后要想得出这样的循环，都可以考虑取模运算；
　　2.设置TOP的值；
　　　　因为每一列的总高度值都是不一样的。所以我们要设三个变量来存放不同列的高度值。
　　　　为什么要取得这个值？
　　　　1.初次加载的时候LI，的TOP值，是根据当前列高度值来设置的；
2.因为AJAX请求后的数据LI要插入到UL当中，必需知道当前列现在的总高度，然后给新的LI为它的TOP值；
其实中间有很多可以说的。但实在是太长了。我代码中注释也写的很清楚了。有问题可以留言和我交流。！！
要提一点的就是，里面有很多相同的功能，我都写到一个FUNCTION当中，方便调用。例如要设LI的TOP和LEFT，要获取LI的列数，要设置列的总高度。这都是共公的，也是功能块，所以还是单独用函数写出来好；

复制代码代码如下:

11111

")
//这里开始和浮动布局不一样了。其它部分在调用AJAX的时候，是一样的；因为这里不需要指定插入到那个UL；
$this.children("ul").append($imgLi);
//获取这个新插入到页面中的LI的列的序号
var _liindex = $imgLi.index();
getcolums(_liindex);
//获取这个新插入到页面中的LI的高度值
var _nlih = $imgLi.outerHeight();
//设置当前LI的TOP和LEFT
setLiOffset($imgLi,_nlih);
})
})
onOff = true;
})
}
})
}
});
})
}
})
})(jQuery)

DEMO下载（这个要在本地机器上安装服务器平台。我用的是PHP套装APPSERV，里面的是APACHE）

jQuery 瀑布流 绝对定位布局（二）(延迟AJAX加载图片)_jquery

jQuery 瀑布流绝对定位布局（二）(延迟AJAX加载图片)_jquery