瀑布流的布局（功能还没有完善）

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>js瀑布流布局</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{margin: 0px; padding: 0px; font-family: "\5FAE\8F6F\96C5\9ED1" !important;}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:block;}
ul li{list-style:none;}
#div1{position:relative;border:1px solid red; margin:0 auto;}
#div1 img{
position:absolute; width:225px; border:1px solid #ccc;
}
</style>
</head>
<script type='text/javascript'>
window.onload=function(){var oDiv=document.getElementById('div1');var oImg=oDiv.getElementsByTagName('img');var cell=4;                         //设置的列数var iW =oImg[0].offsetWidth+13;     //设置每一列的宽度oDiv.style.width=iW*cell-13+'px';   //设置容器的宽度var oImgT=[];                       //定义存放图片高度的数组for(var i=0;i<oImg.length;i++){oImgT.push(oImg[i].offsetHeight); }var cellT=[];                       //定义每一列的top值 for(var i=0;i<cell;i++){           //把第一行排放好，并将每一列的高度记入数据存放在 cellToImg[i].style.left=i*iW+'px';oImg[i].style.top=0+'px';    cellT.push(oImgT[i]);         };for(var i=cell;i<oImg.length;i++){var MinIndex = getMinKey(cellT);oImg[i].style.top = cellT[MinIndex]+10+"px";oImg[i].style.left = iW * MinIndex + "px";cellT[MinIndex] = oImgT[i] + cellT[MinIndex]+10;  //更新该列的高度
  }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><div id='div1' class='clearfix'><img src='images/01.jpg'> <img src='images/02.jpg'><img src='images/03.jpg'><img src='images/04.jpg'><img src='images/05.jpg'><img src='images/06.jpg'><img src='images/07.jpg'><img src='images/08.jpg'><img src='images/09.jpg'><img src='images/10.jpg'><img src='images/11.jpg'><img src='images/12.jpg'><img src='images/13.jpg'><img src='images/14.jpg'><img src='images/15.jpg'><img src='images/16.jpg'><img src='images/17.jpg'><img src='images/18.jpg'><img src='images/19.jpg'><img src='images/20.jpg'></div>
</body>
</html>

转载于:https://www.cnblogs.com/xiaoxiaosha/p/3656181.html

瀑布流的布局（功能还没有完善）相关推荐

html流式布局插件,Jquery瀑布流网格布局插件
插件描述:一款简单且高度可定制的jQuery瀑布流网格布局插件.通过该瀑布流网格插件你可以动态添加和删除各种尺寸的图片,定义图片宽度,设置网格的列数,或使用流式布局方式,甚至还可以通过URL动态添加图 ...
一小时，学习掌握瀑布流页面布局
什么是瀑布流瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.其实瀑布流的特点就是参差不齐的排 ...
【转】关于WaterFall瀑布流式布局的性能优化
市面上已存在的瀑布流式布局的网站: 拼范网:http://www.pinfun.com/ 迷尚网:http://www.mishang.com/ 凡客达人:http://star.vancl.com/ ...
相片堆叠瀑布流网格布局动画效果
介绍: 一款效果超酷堆叠相片转瀑布流网格布局动画效果设计.该效果的灵感来源于takeit网站,它上面的一组堆叠相片在点击按钮或向下滚动鼠标时,会动画转换为网格瀑布流布局网盘下载地址: http:// ...
瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局
写页面时,考虑到美观,良好的用户体验,对于内容的展示我们经常会用到瀑布流式布局,那么如何实现一个简单的瀑布流呢? 瀑布流式布局原理:遍历数组判断奇偶性,然后分左右排布,左右两边代码基本一致直接上代 ...
动态瀑布流网页布局 Jquery 源码
动态瀑布流网页布局jQuery代码,效果超酷,自适应网页宽度,动态缩略图排列效果, 本代码包含两种演示效果, 一种是缩略图布局效果一种是文字布局效果下载地址: http://download.cs ...
什么是瀑布流布局？瀑布流式布局的优缺点
瀑布流又称瀑布流式布局,是一种多列等宽不等高的一种页面布局方式. 视觉表现为参差不齐的多栏布局.随着页面滚动条向下滚动,这种布局会不断加载数据并附加至当前的尾部. 是一种多列等宽不等高的一种页面布局方 ...
在 JQuery Mobile 中实现瀑布流图库布局
先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来. 首先访问Masonry官网下载masonry.pkgd.min.js: ...
masonry ajax瀑布流,瀑布流masonry布局API
Masonry是一款很好用的jquery网页布局插件,它可以去掉不同高度div之间的空白,让你的网页看上去更加的整齐.漂亮!效果如下图所示官网插件下载地址以及详解地址:http://masonry. ...

瀑布流的布局（功能还没有完善）

瀑布流的布局（功能还没有完善）相关推荐

最新文章

热门文章