Chinaunix首页 | 论坛 | 博客
  • 博客访问: 26728
  • 博文数量: 18
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 210
  • 用 户 组: 普通用户
  • 注册时间: 2014-09-25 20:03
文章分类

全部博文(18)

文章存档

2021年(1)

2015年(1)

2014年(16)

我的朋友

分类: 信息化

2014-10-04 04:52:56

然后条用这个函数就行。

最后,对Javascript日期的部分函数做个小结:

var myDate = new Date();

myDate.getYear();  //获取当前年份(2位)

myDate.getFullYear();  //获取完整的年份(4位,1970-????)

myDate.getMonth();  //获取当前月份(0-11,0代表1月)

myDate.getDate();  //获取当前日(1-31)

myDate.getDay();  //获取当前星期X(0-6,0代表星期天)

myDate.getTime();  //获取当前时间(从1970.1.1开始的毫秒数)

myDate.getHours();  //获取当前小时数(0-23)

myDate.getMinutes();  //获取当前分钟数(0-59)

myDate.getSeconds();  //获取当前秒数(0-59)

myDate.getMilliseconds();  //获取当前毫秒数(0-999)

myDate.toLocaleDateString();  //获取当前日期

var mytime=myDate.toLocaleTimeString();  //获取当前时间

myDate.toLocaleString( );  //获取日期与时间

这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网、美丽说等等。而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄袭,呵呵!!)向来都是一个不错的idea。

OK,现在进入正题。这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json。简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和json是滚动加载更多内容的时候用到的。

下面是实现思路

1、计算页面的宽度,计算出页面可放数据块的列数(如上图所示就有6列)。

2、将各个数据块的高度尺寸记入数组中(需要等所有图片加载完成,否则无法知道图片的高度)。

3、用绝对定位先将页面第一行填满,因为第一行的top位置都是一样的,然后用数组记录每一列的总高度。

4、继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。

5、当浏览器窗口大小改变时,重新执行一次上面1-4步以重新排放(列数随页面宽度而改变,因而需要重新排放)。

6、滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。

思路有了,然后就是如何用代码实现。当然,如果看完以上的6个步骤你已经知道如何实现,那么下面的内容大可不必细看。





































































































































































































































































































































































































































































































































































































































































阅读(660) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~