JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记4
5.2.2 让瀑布流动起来
打好基建之后,就需要写JavaScript代码。首先如果数据不够显示一屏幕的情况,就用新数据来补足它,在补充的时候是根据4列中最矮的那一个为优先补充,因为高矮尺寸一般只有在客户端才看得到,服务端虽然也可以计算,但是会很浪费资源,客户端的内存和CPU能用则多用,只要不让客户端变慢就行。
只要图片高度不一致,通过这样的思路很快就可以看到一个“瀑布流”,这仅仅是静态的,一般滚动的时候瀑布流都会添加数据,所以接下来就是添加滚动事件,只要有滚动就计算然后补充数据。
先看图5-5的效果。
在网上收集了一些固定宽度不固定高度的图片,简单设置了一下页面的样式,在实际项目中外观样式设置可能更加复杂一些,本书重点研讨JavaScript,所以还是先看看其实现代码【范例5-2】。
35. eg.getDataList = function(min,max){//模端提供拟构造数据,实际上这些数据由后
36. var lst = [],n=8;//保存数据
37. for(var i=0;i<n;i++){//每次模拟 n 条
38. var k = min + parseInt(Math.random()*(max-min));//随机指定范围的数
39. lst.push(k+".jpg");//拼接成字符串
40. }
41. return lst;//返回数组
42. };
43. eg.cols = eg.getElementsByClassName("col");//把目标对象缓存起来
44. eg.colh = [0,0,0,0];//存取每列的高度
45. eg.getColMin = function(){//计算 4 列高度
46. var min = 0,m = {};
47. for(var i=0;i<4;i++){
48. min = parseInt(eg.cols[i].offsetHeight);
49. eg.colh[i] = min;
50. m[min] = i;
51. }
52. return eg.cols[m[Math.min.apply(Array,eg.colh)]||0];//返回最小高度的对象
53. }
//追加数据的方法
54. eg.add = function(dl){
55. for(var i in dl){
56. var newDiv = document.createElement("div")
57. var newImg = document.createElement("img");
58. newImg.src = dl[i];
59. newDiv.appendChild(newImg);
60. newDiv.innerHTML += '<p>['+dl[i]+']</p>';
61. eg.getColMin().appendChild(newDiv);//追加到最小高度列里
62. }
63. };
64. eg.scroll = function(){//滚动条事件处理
65. window.onscroll = function(){//onscroll,onload,onresize 只能这样添加
66. var doc = document;
67. var top = doc.documentElement.scrollTop || doc.body.scrollTop;//滚动条到顶部的高度
68. var winH = doc.documentElement.clientHeight||doc.body.clientHeight;//可视窗口的高度
69. if(Math.min.apply(Array,eg.colh) < top+winH){ //如果最小高度小于可视区域,就补充
70. eg.add(eg.getDataList(1,35));//随机获取数据,并追加到最 后
71. }
72. }
73. }
上面代码中的 eg.getElementsByClassName()方法是之前定义过的一个方法,存放在 base.js 文件 中,通过【范例 5-1】可知,默认数据很少,需要在初始化的时候补充一些,这就要在 HTML 页面
增加一个 script 标签,先调用 eg.getColMin()获取已经存在的数据高度并保存到 eg.colh 数组中以便
后面判断使用,然后调用 eg.getDataList()方法模拟一批数据,正规项目中会用 AJAX 去服务端请求, 然后把数据用 eg.add()方法追加到后面。最后还要调用一下 eg.scroll()方法绑定滚动条事件的监听, 加入代码是这样的:
<script>
eg.getColMin(); //计算第一批数据的高度
var dl = eg.getDataList(5,35); //初始化一些数据
eg.add(dl); //补充剩下的数据
eg.scroll(); //启动滚动条监听
</script>
注意:由于真实项目中,window.onscroll 事件可能会绑定多个业务,所以本例中的直接覆盖绑 定方式不宜直接拉入项目中去,要确保没有其他业务占用的情况下方可如此,否则可能会出现一些 意外情况,比如无法执行、某些事件被覆盖等等。
图片和文件放置在同一个目录,否则请修改相应的路径。当能够用鼠标怎么也滚不到底的时候,
恭喜你已实现经典的固定列宽瀑布流!
最具士兵突击实战类型的JavaScript
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记4的更多相关文章
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1
技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...
- Node.js高级编程读书笔记Outline
Motivation 世俗一把,看看前端的JavaScript究竟能做什么. 顺便检验一下自己的学习能力. Audience 想看偏后台的Java程序员关于前端JavaScript的认识的职业前端工程 ...
- node.js开发指南读书笔记(1)
3.1 开始使用Node.js编程 3.1.1 Hello World 将以下源代码保存到helloworld.js文件中 console.log('Hello World!'); console.l ...
- Node.js 开发指南-读书笔记
1. Node.js 使用了单 线程.非阻塞的事件编程模式 Node.js 最大的特点就是采用异步式 I/O 与事件驱动的架构设计.对于高并发的解决方 案,传统的架构是多线程模型,也就是为每个业务逻辑 ...
- Node.js高级编程读书笔记 - 4 构建Web应用程序
Outline 5 构建Web应用程序 5.1 构建和使用HTTP中间件 5.2 用Express.js创建Web应用程序 5.3 使用Socket.IO创建通用的实时Web应用程序 5 构建Web应 ...
- Node.js高级编程读书笔记 - 6 应用程序构建和调试 - Never
Explanation 现阶段console.log(...),util.inspect(...), JSON.stringify(...)在控制台输出已经够用了[2015/07/19]. 单元测试隶 ...
- Node.js高级编程读书笔记 - 1 基本概念
Outline 1 概述和安装 1.1 安装Node 1.2 Node简介 2 Node核心API基础 2.1 加载模块 2.2 应用缓冲区处理.编码和解码二进制数据 2.3 使用时间发射器模式简化事 ...
随机推荐
- android自定义TabWidget样式
先看看效果图吧,个人觉得图标丑了点,不过还行,自己用PS做的 下面是全部代码和流程,一定要按流程顺序来,不然错误! 1.tabhost.xml <TabHost xmlns:android=&q ...
- data URI scheme
优化网页效能,首要的任务是尽量减少HTTP请求(http request)的次数,例如把多个JavaScript文档合并,多个CSS文件合并等等.此外,还有有一种 data URL 的方法,可以直接把 ...
- linux 体系结构知识 博客
http://blog.csdn.net/haiross/article/category/1488205/3
- 清除DataTable中的空行记录
第一种方法: string filter = ""; ; i < dt.Columns.Count; i++) { ) filter += dt.Columns[i].Col ...
- Linux 的启动流程
转载:http://www.ruanyifeng.com/blog/2013/08/linux_boot_process.html 更多文档参见:http://pan.baidu.com/s/1hqo ...
- 我的Blog开张啦,欢迎大家赏脸
Blog开张,以后会慢慢更新工作.学习遇到的问题,总结一些经验,观众老爷们多多支持!!! ^_^
- EF——默认映射以及如何使用Data Annotations和Fluent API配置数据库的映射 02 (转)
EF里的默认映射以及如何使用Data Annotations和Fluent API配置数据库的映射 I.EF里的默认映射 上篇文章演示的通过定义实体类就可以自动生成数据库,并且EF自动设置了数据库 ...
- Hastiness
Problem Description How many problems did you AC?When you read this problem, don’t hasty and careles ...
- 1.7.1 solr Searching概述
1. Overview of Searching in Solr 在用户运行一个solr搜索时,搜索查询会被request handler处理.一个request handler就是一个请求处理插件, ...
- 【Android车载系统 News | Tech 2】News 谷歌开发新车载系统!安卓Auto不是终点 2014-12-20
Google在今年推出了车载安卓系统Android Auto,旨在为汽车提供娱乐.导航等功能.不过,Android Auto并不是终点,现在有消息报道,Google正在开发一个能够彻底取代汽车底层控制 ...