日期:2014-05-16  浏览次数:20351 次

PHP+JSON+瀑布流模式+三种风格+无限拖拽方式
<!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) {