瀑布流
现在有很多网站都很流行瀑布流，一直想自己动手写一下，前段时间在网上找了两个关于瀑布流的插件，但是做出来感觉没太有成就感，所以痛下决心，决定自己写一个，所以开始少上网找资料，查找思路，最近终于在一番努力下写了出来，中间可能参考了很多人的代码以及实例，但是当自己真正的完成了以后发现还是比较有成就感的，在这里将他写出来，也供大家参考一下：
可能和别人写的有很多共同的地方，没办法思路就那么几种，而且我也参考了几位同人的代码和编程方式，如果感觉有相同的大家勿怪，在这里我主要参考了http://www.cnblogs.com/NNUF/archive/2012/09/10/2679466.html这位仁兄的瀑布流的绝对定位的写法，我主要改进的地方是把它按高低加载排序，它的写法主要是从左往右每一列反复循环添加，但是由于没有做高低的排序加载，所以这样造成有的列可能特别长，有的可能特别段，所以在此基础上我加入自己的想法略作修改，各位看之前可以先看看这位仁兄的写法，我在这里就不在讲解那些思路和细节问题，在这里紧紧贴出代码和demo，供大家参考
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<style type="text/css">
html, body { height: 100%; /*background: url("/images/brick.jpg") repeat fixed;*/}
html, body, #warp p { margin: 0; padding: 0; }
#warp { margin: 20px auto; position: relative; min-height: 1000px; }
#warp .cell { padding: 10px; border: 1px solid #ccc; box-shadow: 2px 2px 5px #ccc; overflow: hidden; background:white; }
#warp .cell a { text-decoration: none; color: #878787; font: 14px/1.5em Microsoft YaHei; }
img { border: none; }
</style>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var data = [
{ imgUrl: 'images/01.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位01', height: 273 },
{ imgUrl: 'images/02.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位02', height: 144 },
{ imgUrl: 'images/03.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位03', height: 168 },
{ imgUrl: 'images/04.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位04', height: 275 },
{ imgUrl: 'images/05.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位05', height: 288 },
{ imgUrl: 'images/06.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位06', height: 272 },
{ imgUrl: 'images/07.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位07', height: 285 },
{ imgUrl: 'images/08.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位08', height: 282 },
{ imgUrl: 'images/09.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位09', height: 190 },
{ imgUrl: 'images/10.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位10', height: 236 },
{ imgUrl: 'images/11.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位11', height: 225 },
{ imgUrl: 'images/12.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位12', height: 264 },
{ imgUrl: 'images/13.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位13', height: 144 },
{ imgUrl: 'images/14.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位14', height: 192 },
{ imgUrl: 'images/15.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位15', height: 343 }
];
var waterFull = function(obj) {
var id = obj.id,
picWidth = obj.picWidth || 190, //图片宽度
columnPadding = obj.columnPadding || 10, //列的padding值
columnBorder = obj.columnBorder || 1, //列的边框值
columnMarginLeft = obj.columnMarginLeft || 20, //列的margin值
//一个格子的总宽度
cellClientWidth = picWidth + columnPadding * 2 + columnBorder * 2,
obody = document.getElementsByTagName("body")[0],
owarp = document.getElementById(id),
//记录当前插入的格子数量
nowNum = 0,
//存储每一个模块
cells = [];
//记录每一列的高度
lenArr = [];
//获取数字数组最小值的索引
function getMinKey(arr) {
var a = arr[0];
var b = 0;
for (var k in arr) {
if (arr[k] < a) {
a = arr[k];
b = k;
}
}
return b;
}
//获取列数
function getColumnNum() {
var columnNum = Math.floor(obody.clientWidth / (cellClientWidth + columnMarginLeft));
owarp.style.width = columnNum * (cellClientWidth + columnMarginLeft) - columnMarginLeft + 'px';
return columnNum;
}
function init() {
for (var x = 0; x < getColumnNum(); x++) {
lenArr[x] = 0;
}
}
//创建格子
function createCell(left, top, link, imgUrl, imgHeight, title) {
var cssText = 'position:absolute;left:' + left + 'px;top:' + top + 'px';
var innHTML = '<a href="' + link + '" target="_blank"><img src="' + imgUrl + '" alt="' + title + '" height="' + imgHeight + 'px"><p class="title">' + title + '</p></a>';
var div = document.createElement('div');
div.className = 'cell';
div.style.cssText = cssText;
div.innerHTML = innHTML;
return div;
}
//插入数据
function insert(data) {
var fragElement = document.createDocumentFragment();
if (data.length > 0) {
for (var i = 0, n = data.length; i < n; i++) {
var cell = createCell(-9999, -9999, data[i].link, data[i].imgUrl, data[i].height, data[i].title);
fragElement.appendChild(cell);
cells.push(cell);
}
owarp.appendChild(fragElement);
}
//插入后再排列
sort();
}
//排列
function sort() {
var num = getColumnNum(), left, top, column;
//nowNum的作用是不让已经加载的数据重新计算定位排列
for (var j = nowNum, k = cells.length; j < k; j++, nowNum++) {
top = 0;
if (j == 0) {
init();
}
column = getMinKey(lenArr);
if (j < num) {
//第一行列top的值为0
cells[j].style.top = '0px';
}
else {
top = lenArr[column] + columnMarginLeft;
cells[j].style.top = top + 'px';
}
lenArr[column] = top + cells[j].offsetHeight;
left = column * (cellClientWidth + columnMarginLeft);
cells[j].style.left = left + 'px';
}
}
//重新排列
function resort() {
//设置nowNum=0即可重排
nowNum = 0;
//重新排序
sort();
}
return {
insert: insert,
resort: resort
}
}
//判断是否浏览器底部
function isFloor() {
//
var height = document.documentElement.scrollHeight || document.body.scrollHeight;
// 获取页面卷去的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 获取页面可视区域宽度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (scrollTop + clientHeight > height - 50) {
return true;
}
return false;
}
$(function() {
var myWaterFull = waterFull({ id: 'warp' });
myWaterFull.insert(data);
var re;
$(window).scroll(function() {
if (isFloor()) {
myWaterFull.insert(data);
}
});
$(window).resize(function() {
clearTimeout(re);
re = setTimeout(function() { myWaterFull.resort(); }, 200);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="warp">
</div>
</form>
</body>
</html>