<!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>
<meta charset="UTF-8"/>
<title>瀑布流定位</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap" class="wrap active">
<script language="javascript">
var $id = function(o){ return document.getElementById(o) || o};
for(i=0;i<30;i++){
var src = Math.floor(Math.random()*100);
if(src<10){src="0"+src}
if(src<100){src="0"+src}
var div = document.createElement("div");
div.className = "mode popup_in";
div.innerHTML = "<p class='pic'><a href='#'><img src=img/P_"+src+".jpg style='height:"+"auto"+";'/></a></p><h3 class='tit'><span><a href='#'>"+src+".jpg</a></span></h3>";
div.style.top = 0;
div.style.left = 0;
document.getElementById("wrap").appendChild(div);
}
</script>
</div>
</body>
<script type="text/javascript">
var warpWidth = 220; //格子宽度
var margin = 14; //格子间距
function postPosition(el,childTagName){
var h = []; //记录每列的高度
var box = el.getElementsByTagName(childTagName);
var minH = box[0].offsetHeight,
boxW = box[0].offsetWidth+margin;
n = document.documentElement.offsetWidth / boxW | 0; //计算页面能排下多少Pin
el.style.width = n * boxW - margin + "px";
el.style.visibility = "visible";
for(var i = 0; i < box.length; i++) {//排序算法，有待完善
boxh = box[i].offsetHeight; //获取每个Pin的高度
if(i < n) { //第一行特殊处理
h[i] = boxh;
box[i].style.top = 0 + 'px';
box[i].style.left = (i * boxW) + 'px';
}
else {
minH = Array.min(h); //取得各列累计高度最低的一列
minKey = getarraykey(h, minH);
h[minKey] += boxh+margin ; //加上新高度后更新高度值
el.style.height = h[minKey] +"px";
box[i].style.top = minH+margin + 'px';
box[i].style.left = (minKey * boxW) + 'px';
}
}
for(var i = 0; i < box.length; i++) {
box[i].style.visibility = "visible"; //定位完毕后显示新增节点
}
}
Array.min=function(array)
{
return Math.min.apply(Math,array);
}
/* 返回数组中某一值的对应项数 */
function getarraykey(s, v) {
for(k in s) {
if(s[k] == v) {
return k;
}
}
}
window.onload = function() {
postPosition($id("wrap"),"div");
};
var re;
window.onresize = function() {
clearTimeout(re);
re = setTimeout(resize,100);
};
function resize(){
$id("wrap").className = "wrap active";
postPosition($id("wrap"),"div");
}
</script>
<div id="aaa1" style="display:none;position: fixed;width:400px;height:200px;background:#000;color:#fff;top:30%;left:50%"></div>
</html>
?
<!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>
<meta charset="UTF-8"/>
<title>瀑布流定位+无限拖</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="javascript">
var $id = function(o){ return document.getElementById(o) || o};
function getXMLHttp(){
var xmlhttp;
try {
xmlhttp = new XMLHttpRequest(); // Mozilla / Safari / IE7
} catch (e) {
// IE
var XMLHTTP_IDS = new Array('MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP',
'Microsoft.XMLHTTP' );
var success = false;
for (var i=0;i < XMLHTTP_IDS.length && !success; i++) {
try {
xmlhttp = new ActiveXObject(XMLHTTP_IDS[i]);
success = true;
} catch (e) {}
}
if (!success) {
