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" 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) { throw new Error('Unable to create XMLHttpRequest.'); } } return xmlhttp;}</script></head><body><div id="wrap" || (i < n && op =="add" && h.length<n)) { //第一行特殊处理h[i] = boxh;box[i].style.top = 0 + 'px';box[i].style.left = (i * boxW) + 'px';box[i].style.opacity = 1;} else { minH = Array.min(h); //取得各列累计高度最低的一列minKey = getarraykey(h, minH);h[minKey] += boxh+margin ; //加上新高度后更新高度值box[i].style.top = minH+margin + 'px';box[i].style.left = (minKey * boxW) + 'px';box[i].style.opacity = 1;}}maxH = Array.max(h); maxKey = getarraykey(h, maxH);el.style.height = h[maxKey] +"px";}Array.min=function(array){ return Math.min.apply(Math,array);}Array.max=function(array){ return Math.max.apply(Math,array);}/* 返回数组中某一值的对应项数 */function getarraykey(s, v) { for(k in s) { if(s[k] == v) { return k; } }}function getNumber(){return Math.floor(document.documentElement.clientWidth/(warpWidth+14));}//请求数据function getMore(el,childClass){var n = getNumber();el.className = "wrap";var xmlhttp=getXMLHttp();if(xmlhttp==null){alert("您的浏览器不支持Ajax!");return;};xmlhttp.onreadystatechange=stateChange;xmlhttp.open("POST","json.php",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("num="+3*n);function stateChange(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){m = xmlhttp.responseText;changeJeson(el,m,childClass);//处理jeson}}}function changeJeson(el,json,childClass){var jsonString = json; // 获取服务器返回的json字符串var jsonObj = null;try {jsonObj = eval('(' + jsonString + ')'); // 将json字符串转换成对象} catch (ex) {return null;}addList(el,jsonObj,childClass);//执行添加节点函数}function addList(el,jsonObj,childClass){var newBox = [];for(var i=0;i<jsonObj.images.length;i++){var div = document.createElement("div");var src =String(jsonObj.images[i].src);var width =String(jsonObj.images[i].width);var height =String(jsonObj.images[i].height);//$id("aaa1").innerHTML =$id("aaa1").innerHTML + src+","if(src.length == 1) {src = "00" + src}else if(src.length == 2) {src = "0" + src};div.className = childClass+" "+"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 = startH +"px";div.style.opacity = 0;el.appendChild(div);newBox[i]=div;}chackImg(el,newBox);sumChild = sumChild+Number(jsonObj.images.length);}function chackImg(el,newBox){var imgs =[];imgs=el.getElementsByTagName("img");//只遍历新增图片for(i=sumChild;i<imgs.length;i++){var img = new SImage(icall,el,imgs.length,imgs[i].src,newBox);}}function SImage(callback,el,num,url,newBox) { var img = new Image(); this.img = img; this.img.src = url; var appname = navigator.appName.toLowerCase(); if (appname.indexOf("netscape") == -1) { //ie img.onreadystatechange = function() { if (img.readyState == "complete") { callback(img,el,num,t,newBox); } }; } else { //firefox img.onload = function() { if (img.complete == true) { callback(img,el,num,newBox); } } }}function icall(obj,el,num,newBox){if(t<num-1){t++;}else{sortNew(el,newBox);t=sumChild;}}window.onload = function() {getMore($id("wrap"),"mode","first");};var re;var so;window.onresize = function() {clearTimeout(re);re = setTimeout(resize,100);}function resize(){$id("wrap").className = "wrap active";sortAll($id("wrap"),"div");}window.onscroll = function(){var a=document.body.scrollHeight;var b=document.documentElement.clientHeight;var c=document.documentElement.scrollTop + document.body.scrollTop;if((c+b+20>=a)&&isAjax==0){isAjax=1;getMore($id("wrap"),"mode");} else {return}} </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) { throw new Error('Unable to create XMLHttpRequest.'); } } return xmlhttp;}</script></head><body><div id="wrap" || (i < n && op =="add" && h.length<n)) { //第一行特殊处理h[i] = boxh;box[i].style.top = 0 + 'px';box[i].style.left = (i * boxW) + 'px';box[i].style.opacity = 1;} else { minH = Array.min(h); //取得各列累计高度最低的一列minKey = getarraykey(h, minH);h[minKey] += boxh+margin ; //加上新高度后更新高度值box[i].style.top = minH+margin + 'px';box[i].style.left = (minKey * boxW) + 'px';box[i].style.opacity = 1;}}maxH = Array.max(h); maxKey = getarraykey(h, maxH);el.style.height = h[maxKey] +"px";}Array.min=function(array){ return Math.min.apply(Math,array);}Array.max=function(array){ return Math.max.apply(Math,array);}/* 返回数组中某一值的对应项数 */function getarraykey(s, v) { for(k in s) { if(s[k] == v) { return k; } }}function getNumber(){return Math.floor(document.documentElement.clientWidth/(warpWidth+14));//return 3;}//请求数据function getMore(el,childClass){var n = getNumber();el.className = "wrap";var xmlhttp=getXMLHttp();if(xmlhttp==null){alert("您的浏览器不支持Ajax!");return;};xmlhttp.onreadystatechange=stateChange;xmlhttp.open("POST","json.php",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("num="+3*n);function stateChange(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){m = xmlhttp.responseText;changeJeson(el,m,childClass);//处理jeson}}}function changeJeson(el,json,childClass){var jsonString = json; // 获取服务器返回的json字符串var jsonObj = null;try {jsonObj = eval('(' + jsonString + ')'); // 将json字符串转换成对象} catch (ex) {return null;}addList(el,jsonObj,childClass);//执行添加节点函数}function addList(el,jsonObj,childClass){var newBox = [];sumChild = sumChild+Number(jsonObj.images.length);for(var i=0;i<jsonObj.images.length;i++){var src =String(jsonObj.images[i].src);//var width =String(jsonObj.images[i].width);//var height =String(jsonObj.images[i].height);//$id("aaa1").innerHTML =$id("aaa1").innerHTML + src+","if(src.length == 1) {src = "00" + src}else if(src.length == 2) {src = "0" + src};imgReady("img/P_"+src+".jpg",jsonObj.images.length , i , el , newBox , childClass ,function () {var height = this.height;var src = this.src;var el = this.el;var newBox = this.newBox;var childClass = this.childClass;var i = this.i;var length = this.length;callBackAdd(height, src , length, i ,el,newBox,childClass);});}//chackImg(el,newBox);}function callBackAdd(height,src, length, i ,el,newBox,childClass){var div = document.createElement("div");div.className = childClass+" "+"popup_in"; //预留接口div.innerHTML = "<p class='pic'><a href='#'><img src="+src+" style='height:"+height+"px'/></a></p><h3 class='tit'><span><a href='#'>"+src+"</a></span></h3>";div.style.top = startH +"px";div.style.opacity = 0;el.appendChild(div);newBox[i]=div;t++;if(t>length-1){sortNew(el,newBox);t=0;}}function chackImg(el,newBox){var imgs =[];imgs=el.getElementsByTagName("img");//只遍历新增图片for(i=sumChild;i<imgs.length;i++){//var img = new SImage(icall,el,imgs.length,imgs[i].src,newBox);}}/** * 图片头数据加载就绪事件 - 更快获取图片尺寸 * @version2011.05.27 * @authorTangBin * @seehttp://www.planeart.cn/?p=1121 * @param{String}图片路径 * @param{Function}尺寸就绪 * @param{Function}加载完毕 (可选) * @param{Function}加载错误 (可选) */var imgReady = (function () {var list = [], intervalId = null,// 用来执行队列tick = function () {var i = 0;for (; i < list.length; i++) {list[i].end ? list.splice(i--, 1) : list[i]();};!list.length && stop();},// 停止所有定时器队列stop = function () {clearInterval(intervalId);intervalId = null;};return function (url, length , i, el , newBox , childClass, ready, load, error) {var onready, width, height, newWidth, newHeight,img = new Image();img.src = url;// 如果图片被缓存，则直接返回缓存数据if (img.complete) {//ready.call(img);//load && load.call(img);//return;};width = img.width;height = img.height;img.el = el ;img.newBox = newBox ;img.childClass = childClass ;img.i = i ;img.length = length ;// 加载错误后的事件img.onerror = function () {error && error.call(img);onready.end = true;img = img.onload = img.onerror = null;};// 图片尺寸就绪onready = function () {newWidth = img.width;newHeight = img.height;if (newWidth !== width || newHeight !== height ||// 如果图片已经在其他地方加载可使用面积检测newWidth * newHeight > 1024) {//alert(ready)ready.call(img);onready.end = true;};};//onready();// 完全加载完毕的事件img.onload = function () {// onload在定时器时间差范围内可能比onready快// 这里进行检查并保证onready优先执行!onready.end && onready();load && load.call(img);// IE gif动画会循环执行onload，置空onload即可img = img.onload = img.onerror = null;};// 加入队列中定期执行if (!onready.end) {list.push(onready);// 无论何时只允许出现一个定时器，减少浏览器性能损耗if (intervalId === null) intervalId = setInterval(tick, 40);};};})();window.onload = function() {getMore($id("wrap"),"mode");};var re;var so;window.onresize = function() {clearTimeout(re);re = setTimeout(resize,100);}function resize(){$id("wrap").className = "wrap active";sortAll($id("wrap"),"div");}window.onscroll = function(){var a=document.body.scrollHeight;var b=document.documentElement.clientHeight;var c=document.documentElement.scrollTop + document.body.scrollTop;//$id("aaa1").innerHTML=a+"xxx"+b+"xxx"+c;if((c+b>=a)&&isAjax==0){isAjax=1;getMore($id("wrap"),"mode");} else {return}} </script><div id="aaa1" style="display:none;position: fixed;width:400px;height:200px;background:#000;color:#fff;top:30%;left:50%"></div></html>?