<!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) { throw new Error('Unable to create XMLHttpRequest.'); } } return xmlhttp; } </script> </head> <body> <div id="wrap" class="wrap "></div> <div style="text-align:center;padding:20px 0 120px;">正在加载……</div> </body> <script type="text/javascript"> /** * 瀑布流排版Demo * @version 2012.04.09 * @author leon * @see http://cued.xunlei.com/log031 * 学习交流 · 版权没有 **/ var t=0;//全局变量,重排开关。服务器能够给出图片宽高则不需要此项 var startH = 0; //加载元素的初始位置 var warpWidth = 220; //格子宽度 var margin = 14; //格子间距 var isAjax = 1; //ajax开关 var sumChild = 0; //记录当前总共有多少个格子 var h = []; //记录每列的高度 function sortNew(el,newBox){ var box = newBox; postPosition(el,box,"add");//执行定位函数 for(var i = 0; i < box.length; i++) { box[i].style.visibility = "visible"; //定位完毕后显示新增节点 } isAjax=0; startH = h[0]; if( navigator.userAgent.indexOf("Firefox") > -1) { scroll(0,startH-500);//火狐滚动条问题,暂无好的解决办法,随便打个补丁先 } } function sortAll(el,childTagName){ h = []; //每次重排都要重置列高度记录数组 var box = el.getElementsByTagName(childTagName); postPosition(el,box,"re");//执行定位函数 } function postPosition(el,box,op){ 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 && op =="re" || (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" class="wrap "></div> <div style="text-align:center;padding:20px 0 120px;">正在加载……</div> </body> <script type="text/javascript"> /** * 瀑布流排版Demo * @version 2012.04.09 * @author leon * @see http://cued.xunlei.com/log031 * 学习交流 · 版权没有 **/ var t=0;//全局变量,重排开关。服务器能够给出图片宽高则不需要此项 var startH = 0; //加载元素的初始位置 var warpWidth = 220; //格子宽度 var margin = 14; //格子间距 var isAjax = 1; //ajax开关 var sumChild = 0; //记录当前总共有多少个格子 var h = []; //记录每列的高度 function sortNew(el,newBox){ var box = newBox; postPosition(el,box,"add");//执行定位函数 for(var i = 0; i < box.length; i++) { box[i].style.visibility = "visible"; //定位完毕后显示新增节点 } startH = h[0]; isAjax=0; if( navigator.userAgent.indexOf("Firefox") > -1) { scroll(0,startH-500);//火狐滚动条问题,暂无好的解决办法,随便打个补丁先 } } function sortAll(el,childTagName){ h = []; //每次重排都要重置列高度记录数组 var box = el.getElementsByTagName(childTagName); postPosition(el,box,"re");//执行定位函数 } function postPosition(el,box,op){ 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 && op =="re" || (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); } } /** * 图片头数据加载就绪事件 - 更快获取图片尺寸 * @version 2011.05.27 * @author TangBin * @see http://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>
更多内容 请参考我的个人博客 http://ismartstudio.com/
相关推荐
瀑布流布局,也称为Masonry布局,是一种常用于图片展示的网页设计模式,它通过将内容元素(如图片)按照不等高的方式排列,形成一种类似瀑布的效果,使得页面看起来富有层次感和视觉冲击力。在Web开发中,通常会结合...
标题中的"notepad++ JsonView.zip"表明这是一个与Notepad++文本编辑器相关的插件,具体是用于查看和处理JSON(JavaScript Object Notation)数据的工具。JSON是一种轻量级的数据交换格式,常用于Web服务和应用程序...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛应用于Web服务和应用程序之间交换数据。Notepad++是一款免费且开源的文本编辑器,特别适合程序员和开发者使用,因为它支持多种编程语言,并提供...
NotePad++ JSON插件 JSONViewer1.22,可以查看Json格式、格式化Json。 使用说明:将NPPJSONViewer.dll放Notepad++\plugins目录,重启NPP后,选中要格式化的Json串,点插件->JSON Viwer->Format Json
可以将字符串按照json格式展示,更好的格式化后进行操作和查看
32位、64位的notepad++ jsonviewer插件见附件
瀑布流布局是一种常见的网页设计方式,它以一种不规则的方式排列元素,使页面看起来像瀑布一样自上而下流动。这种布局方式最早被Pinterest采用,随后在社交媒体和图像分享网站中广泛流行。在这个项目中,我们将探讨...
这个资源"struts2+json"显然涉及到在Struts2框架下实现JSON(JavaScript Object Notation)数据交换,这是一种轻量级的数据交换格式,广泛用于前后端交互,特别是AJAX(Asynchronous JavaScript and XML)请求。...
JSON是一种轻量级的数据交换格式,被广泛用于Web服务和API之间交换数据。 JsonView插件的安装非常简单,首先你需要下载与你的Notepad++版本匹配的插件包。Notepad++有32位和64位两个版本,确保你选择正确版本的Json...
标题提到的"NotePad++ JSON 插件"正是这样一种扩展,专门用于处理JSON(JavaScript Object Notation)数据格式。 JSON是一种轻量级的数据交换格式,它基于JavaScript语法,但独立于语言,易于人阅读和编写,同时也...
在IT行业中,PHP、AJAX和JSON是三个关键的技术组件,它们在构建动态、交互性强的Web应用程序中发挥着至关重要的作用。在这个“php+ajax+json的简单实例”中,我们将深入理解这三个技术是如何协同工作的。 首先,PHP...
JSON是一种轻量级的数据交换格式,因其简洁、易读、易于机器解析和生成而被广泛应用于Web服务和APIs中。 标签“插件”表明NPPJSONViewer是一个可安装在Notepad++上的附加组件,它可以增强编辑器的功能,提供JSON...
JSON格式化插件是开发者处理JSON文件时非常有用的工具,它能帮助用户以整洁、易读的方式展示JSON数据,而无需手动调整缩进和换行。 `NPPJSONViewer-win32.dll` 是一个动态链接库文件,通常用于为应用程序提供特定的...
notepad++JSON格式化插件64位。
Notepad++ 的JSON-Viewer插件jsonviewer插件64位版本x64,用于格式化json
直接复制到Notepad++ 安装目录下的\plugins文件夹即可 - 使用的时候全选json部分字符 - 在工具栏选择 -插件 --JSONviewer ---Format JSON 即可转换
JSON是一种轻量级的数据交换格式,因其简洁和易于阅读的特性,被广泛应用于Web服务和API数据传输。 描述中提到了两个文件,分别是32位系统的"NPPJSONViewer.dll"和64位系统的"Jsonviewer2.dll"。这两个插件都是为了...
JSON是一种轻量级的数据交换格式,它的结构清晰、易于人阅读和编写,同时也方便机器解析和生成。在开发过程中,我们经常需要查看或编辑JSON文件,而手动保持正确的缩进和格式可能会很麻烦。Notepad++的JSON格式化...
总之,Notepad++的NPPJSONViewer插件为处理JSON数据提供了一种高效且直观的方式,无论你是前端开发者、后端开发者还是数据分析师,都能从中受益。通过正确安装和使用这个插件,你可以在Notepad++中更便捷地管理和...