等宽格子堆砌
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<ul>
<ul>
<li>
<div style="height: 20px;">Vivamus aliquet, est a rhoncus dapibus, velit tortor tempor turpis, a pharetra diam lacus a metus. Aliquam erat volutpat. Aliquam a metus orci, a molestie lacus. Integer vestibulum sem nec risus iaculis eu rhoncus tellus tempor.
<div>Mauris aliquam, risus vel sodales laoreet, mi nulla faucibus nunc, eu tincidunt nisi leo sed orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum augue at erat semper rutrum.
<div>iquet, est a rhoncus dapibus, velit tortor tempor turpis, a pharetra diam lacus a metus. Aliquam erat volutpat. Aliquiquet, est a rhoncus dapibus, velit tortor tempor turpis, a pharetra diam lacus a metus. Aliquam erat volutpat. Aliqu</div>
<input onclick="show(this)" type="button" value="wef" /></div>
</div></li>
</ul>
</ul>
<script type="text/javascript">// <![CDATA[
var $id = function(o){ return document.getElementById(o) || o};
function sort(el){
var h = [];
var box = el.getElementsByTagName("li");
var minH = box[0].offsetHeight,
boxW = box[0].offsetWidth,
boxH,
n = document.documentElement.offsetWidth / boxW | 0; //计算页面能排下多少Pin
el.style.width = n * boxW + "px";
for(var i = 0; i < box.length; i++) {
boxh = box[i].offsetHeight; //获取每个Pin的高度
//alert(box[i].scrollHeight);
if(i < n) { //第一行Pin以浮动排列，不需绝对定位
h[i] = boxh;
box[i].style.position = '';
$(box[i]).attr("columns",i);
} else {
minH = Math.min.apply({},h); //取得各列累计高度最低的一列
minKey = getarraykey(h, minH);
h[minKey] += boxh ; //加上新高度后更新高度值
box[i].style.position = 'absolute';
box[i].style.top = minH + 'px';
box[i].style.left = (minKey * boxW) + 'px';
$(box[i]).attr("columns",minKey);
}
}
};
/* 返回数组中某一值的对应项数 */
function getarraykey(s, v) {
for(k in s) {
if(s[k] == v) {
return k;
}
}
};
/* 随机创建Pin */
var boxMaker = {};
boxMaker.lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu interdum odio. Cras lobortis mauris vitae tellus consectetur sit amet cursus ipsum vestibulum. Duis facilisis sodales tristique. Vivamus aliquet, est a rhoncus dapibus, velit tortor tempor turpis, a pharetra diam lacus a metus. Donec gravida faucibus magna, nec laoreet nibh placerat et. Cras magna lorem, faucibus vitae rhoncus ac, tincidunt vel velit. Mauris aliquam, risus vel sodales laoreet, mi nulla faucibus nunc, eu tincidunt nisi leo sed orci. Curabitur sagittis libero eu augue luctus ullamcorper. Phasellus sed tortor sed nunc elementum rutrum. Maecenas eu enim a nulla faucibus commodo iaculis tempor orci. Integer at ligula id mauris semper bibendum at eu erat. Integer vestibulum sem nec risus iaculis eu rhoncus tellus tempor. Suspendisse potenti. Sed bibendum nibh non velit blandit eu adipiscing ligula consectetur. Vivamus turpis quam, fringilla a elementum a, condimentum non purus. Pellentesque sed bibendum ante. Fusce elit mauris, pulvinar sed rutrum eget, malesuada in nisi. Etiam sagittis pretium ligula. Aliquam a metus orci, a molestie lacus. Suspendisse potenti. Mauris vel volutpat nunc. In condimentum imperdiet scelerisque. Cras aliquam tristique velit non iaculis. Aliquam pulvinar sagittis sodales. Aenean risus orci, elementum quis accumsan eget, elementum cursus tellus. Nunc vel laoreet odio. Maecenas sollicitudin, tellus vel bibendum ornare, tellus nibh hendrerit lorem, quis volutpat turpis odio ac ligula. Etiam tempus neque id libero feugiat fringilla. Nullam posuere consequat vehicula. Mauris in lorem eget sem tempor condimentum. Integer rhoncus accumsan elit eu gravida. Donec dictum ante ac nisl adipiscing vel tempor libero luctus. Praesent bibendum augue at erat semper rutrum. Fusce vel orci nulla. Vivamus condimentum, odio vel condimentum tempus, mauris ipsum gravida odio, sed viverra dolor velit sit amet magna. Donec aliquam malesuada ipsum ut suscipit. Vivamus porttitor posuere iaculis. Vestibulum lectus lorem, tincidunt at sodales et, euismod vel quam. Sed eget urna nunc. In quis felis nunc. Aliquam erat volutpat. Cras ut dui ac leo aliquet placerat faucibus in nulla. Mauris pharetra ligula et tortor ultricies eget elementum libero blandit. Praesent tincidunt, mi quis aliquam faucibus, leo risus placerat odio, ac adipiscing ante urna at tortor.'.split(".");
boxMaker.loremLen = boxMaker.lorem.length;
boxMaker.randoLoremText = function() {
var loremText = '',
sentences = Math.random() * 5;
for (var j=0; j < sentences; j++ ) {
var whichSentence = Math.floor( Math.random() * boxMaker.loremLen );
loremText += boxMaker.lorem[whichSentence] + '. ';
}
return loremText;
};
var pin = '';
for(i = 0; i <20; i++) {
//height = Math.floor(Math.random()*200 + 200);
//pin += '
<li>
<div style="height:' + height + 'px;"></div></li>
';
pin += '
<li>
<div style="height:20px;">'+boxMaker.randoLoremText()+'
<div>'+boxMaker.randoLoremText()+'</div>
</div></li>
';
};
//$id("wrap").innerHTML = pin;
$('#wrap').append(pin);
window.onload = window.onresize = function() {
sort($id("wrap"));
};
//显示隐藏层、改变相应的div绝对定位值
function show(el){
//显示隐藏前该层的高度
boxh = $(".xxxxxxx").parent().parent().parent().height();
$(".xxxxxxx").hide();
//显示隐藏后该层改变的高度
diffHeight = $(".xxxxxxx").parent().parent().parent().height()-boxh;
//alert(diffHeight);
//获取当前列号
var col= $(".xxxxxxx").parent().parent().parent().attr("columns");
var h = [];
var box = document.getElementsByTagName("li");
//获取本层的编号0开始
var now = $(".xxxxxxx").parent().parent().parent().prevAll("li").length;
now++;
//更新层绝对定位的循环
for (var i = box.length; i--;) {
//每一个层的层号
var colums = $(box[i]).attr("columns");
//每一个层的top值
var docTop = $(box[i]).css("top");
//去掉top的px转换为int
docTop = parseInt(docTop.substr(0,docTop.length-2));
//循环到发生改变的层 则停止
if(now==i) break;
//如果属于那一列，则改变他们的top值
if (colums == col) {
var Newheight = docTop + diffHeight;
$(box[i]).css("top",Newheight+"px");
}
}
}
// ]]></script>