javascript实现的自适应宽度的瀑布流
2024-06-03 01:50:24
为什么80%的码农都做不了架构师？>>> 
原文地址：http://www.cnblogs.com/xueming/archive/2013/02/19/flow.html
View Code <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>瀑布流布局</title><style type="text/css">body{margin:0; font-family:微软雅黑;}#flow-box{margin:10px auto 0 auto; padding:0; position:relative}#flow-box li{width:190px; position:absolute; padding:10px; border:solid 1px #efefef; list-style:none; opacity:0;-moz-opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity 500ms ease-in-out;-moz-transition:opacity 500ms ease-in-out;-o-transition:opaicty 500ms ease-in-out;transition:opaicty 500ms ease-in-out;}#flow-box li img{width:100%;}#flow-box li a{display:block; width:100%; text-align:center; font-size:14px; color:#333; line-height:18px; margin-top:10px; text-decoration:none;}.loadwrap{position:absolute; left:0; width:100%; text-align:center;}</style></head><body><ul id="flow-box"><li><img src="http://www.mitxiong.com/NewsImages/2012121821504156.jpg" /><a href="#">图片标题1</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012112718241731.jpg" /><a href="#">图片标题2</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012111806582944.jpg" /><a href="#">图片标题3</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012110907231232.jpg" /><a href="#">图片标题4</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012110406319529.jpg" /><a href="#">图片标题5</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012101808066955.jpg" /><a href="#">图片标题6</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012101307276582.jpg" /><a href="#">图片标题7</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012082223432719.jpg" /><a href="#">图片标题8</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012082121509065.jpg" /><a href="#">图片标题9</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012081922387254.jpg" /><a href="#">图片标题10</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012081700252403.jpg" /><a href="#">图片标题11</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012081407597304.jpg" /><a href="#">图片标题12</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012081218248259.jpg" /><a href="#">图片标题13</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012080621278799.jpg" /><a href="#">图片标题14</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012072907484455.jpg" /><a href="#">图片标题15</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012072521564314.jpg" /><a href="#">图片标题16</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012072507238259.jpg" /><a href="#">图片标题17</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012072409035684.jpg" /><a href="#">图片标题18</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012072219405236.jpg" /><a href="#">图片标题19</a></li><li><img src="http://www.mitxiong.com/NewsImages/2012071218416980.jpg" /><a href="#">图片标题20</a></li></ul><div id="loadimg" class="loadwrap"><img src="Images/load.jpg" /></div><script type="text/javascript">function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离var w = document.documentElement.offsetWidth;//计算页面宽度var ul = document.getElementById("flow-box");var li = ul.getElementsByTagName("li");var iw = li[0].offsetWidth + mh;//计算数据块的宽度var c = Math.floor(w / iw);//计算列数ul.style.width = iw * c - mh + "px";//设置ul的宽度至适合便可以利用css定义的margin把所有内容居中var liLen = li.length;var lenArr = [];for (var i = 0; i < liLen; i++) {//遍历每一个数据块将高度记入数组lenArr.push(li[i].offsetHeight);}var oArr = [];for (var i = 0; i < c; i++) {//把第一行排放好，并将每一列的高度记入数据oArrli[i].style.top = "0";li[i].style.left = iw * i + "px";li[i].style.opacity = "1";li[i].style["-moz-opacity"] = "1";li[i].style["filter"] = "alpha(opacity=100)";oArr.push(lenArr[i]);}for (var i = c; i < liLen; i++) {//将其他数据块定位到最短的一列后面，然后再更新该列的高度var x = _getMinKey(oArr);//获取最短的一列的索引值li[i].style.top = oArr[x] + mv + "px";li[i].style.left = iw * x + "px";li[i].style.opacity = "1";li[i].style["-moz-opacity"] = "1";li[i].style["filter"] = "alpha(opacity=100)";oArr[x] = lenArr[i] + oArr[x] + mv;//更新该列的高度}document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//将loading移到下面function scroll() {//滚动加载数据var st = oArr[_getMinKey(oArr)];var scrollTop = document.documentElement.scrollTop > document.body.scrollTop? document.documentElement.scrollTop : document.body.scrollTop;if (scrollTop >= st - document.documentElement.clientHeight) {window.onscroll = null;//为防止重复执行，先清除事件_request(null, "GetList.php", function(data) {//当滚动到达最短的一列的距离时便发送ajax请求新的数据，然后执行回调函数_addItem(data.d, function() {//追加数据var liLenNew = li.length;for(var i = liLen; i < liLenNew; i++) {lenArr.push(li[i].offsetHeight);}for(var i = liLen; i < liLenNew; i++) {var x = _getMinKey(oArr);li[i].style.top = oArr[x] + 10 + "px";li[i].style.left = iw * x + "px";li[i].style.opacity = "1";li[i].style["-moz-opacity"] = "1";li[i].style["filter"] = "alpha(opacity=100)";oArr[x] = lenArr[i] + oArr[x] + 10;}document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//loading向下移位liLen = liLenNew;window.onscroll = scroll;//执行完成，恢愎onscroll事件});})}}window.onscroll =scroll;}//图片加载完成后执行window.onload = function() {flow(10, 10)};//改变窗口大小时重新布局var re;window.onresize = function() {clearTimeout(re);re = setTimeout(function() {flow(10, 10);}, 200);}//追加项function _addItem(arr, callback) {var _html = "";var a = 0;var l = arr.length;(function loadimg() {var img = new Image();img.onload = function() {a += 1;if (a == l) {for (var k in arr) {var img = new Image();img.src = arr[k].img;_html += '<li><img src="' + arr[k].img + '" /><a href="#">' + arr[k].title + '</a></li>';}_appendhtml(document.getElementById("flow-box"), _html);callback();}else {loadimg();}}img.src = arr[a].img;})()}//ajax请求function _request(reqdata, url, callback) {var xmlhttp;if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();}else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {var data = eval("(" + xmlhttp.responseText + ")");callback(data);}}xmlhttp.open("POST", url);xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");xmlhttp.send(reqdata);}//追加htmlfunction _appendhtml(parent, child) {if (typeof (child) == "string") {var div = document.createElement("div");div.innerHTML = child;var frag = document.createDocumentFragment();(function() {if (div.firstChild) {frag.appendChild(div.firstChild);arguments.callee();}else {parent.appendChild(frag);}})();}else {parent.appendChild(child);}}//获取数字数组的最大值function _getMaxValue(arr) {var a = arr[0];for (var k in arr) {if (arr[k] > a) {a = arr[k];}}return a;}//获取数字数组最小值的索引function _getMinKey(arr) {var a = arr[0];var b = 0;for (var k in arr) {if (arr[k] < a) {a = arr[k];b = k;}}return b;}</script></body></html>转载于:https://my.oschina.net/parker/blog/112007
javascript实现的自适应宽度的瀑布流相关推荐
- JavaScript实现自适应宽度的瀑布流
摘要: 主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和json是滚动 ...
- 自适应宽度的瀑布流实现思路
这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和json是滚动加载 ...
- Android RecyclerView实现图片自适应高度的瀑布流
项目中要实现图片自适应高度的瀑布流,咋样自适应高度呢? 1.item的高度宽度要wrap_content 2.获得图片的高度宽度 3.onBindViewHolder中绑定数据的时候,先获取item宽 ...
- Vue原生图片瀑布流
图片瀑布流可以节省图片的排版空间,美观图片的排列,避免图片排列的参差不齐. 实现图片瀑布流可以固定宽(花瓣),也可以固定高(百度图片),看个人需求,我的需求是宽固定. 如果图片的排列不适用瀑布流的话, ...
- Jquery瀑布流插件wookmark
瀑布流布局在现在的网页设计里面可谓是相当的流行的,从网页到手机应用,都能见到瀑布流的身影.相比较手机应用来说,感觉网页上的瀑布流布局效果实现简单很多,因为我们有现成的jQuery插件可以用,只要稍微的 ...
- react-native-waterfall-flow 高性能瀑布流组件
react-native-waterfall-flow React Native 高性能瀑布流组件 特性 性能方面表现突出,渲染速度快,滚动体验良好 无需手动设置item高度,一切计算工作由组件内部完 ...
- 用原生JavaScript实现图片瀑布流的浏览效果
学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...
- javascript瀑布流效果
javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...
- JavaScript——原生js实现瀑布流
瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...
最新文章
- Android 10.0系统启动之init进程-[Android取经之路]
- Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4:test (default-test)
- 信息系统项目管理知识--项目沟通管理
- mongoose多个连接_连接（connections）
- Java并发编程—说说Runnable与Callable
- sap.ui.viewModifications view extension
- mysql五-1:单表查询
- Windows 2003安全事件ID分析(1)
- rstudio 修改代码间距_如何在RStudio里修改R脚本的编码方式
- PIE SDK导出图片
- ping，python实现批量ping包工具--小案例v4优化版本
- Spring.net 控制反转(IoC)容器_（收集）
- wps怎么做时间线_wps中的word文档如何制作时间轴
- 质量管理3个过程及相关重点
- 今天是星期五，上班已经三个礼拜了
- android studio 使用夜神模拟器
- Linux RHEL/Ubuntu安装教程
- 微商截图管家 v1.0.0
- java饲养员喂动物_做一个饲养员给动物喂食物的例子体现JAVA中的面向对象思想,接口（抽象类）的用处...
- 第五章 留数及其应用