JS案例之7——瀑布流布局(2)
2024-10-19 03:30:29
这个例子与上一篇类似,唯一的区别是排序的方式有差别。上一篇是在高度最小的列里插入内容,这个案例是按顺序放置内容。
两种方法各有优缺点。第一种需要在图片内容加载完成的情况下有效。这个例子不需要在window.onload之后执行,直接计算每列的索引,按照顺序一列一列的放置。用下面的图做说明。
说明:
上一个案例如下图:
源代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title>waterfall布局</title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's js lib" />
<meta name="description" content="waterfall布局" />
<style>
*{margin:0;padding:0;}
li{list-style:none;}
p{margin:20px;} .list li{float:left;min-height:10px;margin:0 0 0 20px;}
.list .item{margin:0 0 10px;}
.list img{display:block;width:100%;} #content{display:none;}
</style>
</head> <body>
<div class="content" id="content">
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_101.jpg" />01</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_102.jpg" />02</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_103.jpg" />03</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_104.jpg" />04</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_105.jpg" />05</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_106.jpg" />06</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_107.jpg" />07</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_108.jpg" />08</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_109.jpg" />09</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_110.jpg" />10</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_111.jpg" />11</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_112.jpg" />12</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_113.jpg" />13</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_114.jpg" />14</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_115.jpg" />15</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_116.jpg" />16</div>
<div class="item"><img src="http://cued.xunlei.com/demos/publ/img/P_117.jpg" />17</div>
</div>
<div class="list" id="list"></div> <script>
var waterFall = {
content:document.getElementById('content'), //存放内容的容器
list:document.getElementById('list'), //将要展示的列表容器 setOptions:function(options){
options = options || {};
this.colNum = options.num || 3; //显示的列数,默认显示3列
this.colWidth = options.width || 200; //每列的宽度
}, //构建列数
setColumn:function(){
var self = this;
var html = '';
for(var i=0,l=self.colNum;i<l;i++){
html += '<li style="width:'+ self.colWidth +'px;"></li>';
}
self.list.innerHTML = html; self.column = self.list.getElementsByTagName('li');
}, //填充内容
setCont:function(cnt){
var self = this;
self.index = self.index%self.colNum || 0; //将要放置内容的列的索引,默认从0开始
self.column[self.index].appendChild(cnt);
self.index ++;
if(!!self.content.children[0]){
self.setCont(self.content.children[0]);
}
}, init:function(options){
var self = this;
self.setOptions(options);
self.setColumn();
self.setCont(self.content.children[0]);
}
}; waterFall.init();
</script>
</body>
</html>
下载地址: http://pan.baidu.com/s/1jG0ygVO
最新文章
- [leetcode] 根据String数组构造TreeNode,用于LeetCode树结构相关的测试用例
- 【iOS】我的Objective-C学习笔记
- Java条形码生成技术-Barcode4j
- Bootstrap系列 -- 23. 图片
- 在rails下新建表
- 随机数产生random
- STM32F0xx_TIM基本延时配置详细过程
- Feister network
- strcpy实现
- [AngularJS] Transforming raw JSON data to meaningful output in AngularJS
- 【BZOJ2006】超级钢琴(主席树,优先队列)
- Java项目使用SQLite数据库后无法启动的问题
- 【mongo】可以用localhost启动,无法用ip启动问题的解决
- Aplication的意义和生命周期,与Context的关系,以及关于Aplication和Context相关问题的记录和解决办法
- [UWP 自定义控件]了解模板化控件(6):使用附加属性
- 利用spring boot+vue做的一个博客项目
- JS 动态加载脚本的4种方法
- Android权限管理
- 【详解】JNI (Java Native Interface) (二)
- 重读JavaScript高级程序设计