小A

  • 旧的记忆
  • 关于我

瀑布流网站布局和JQuery插件实现

分类:Javascript日期:2012-04-25作者:awinds阅读:611 views

演示页面:http://lijian.net/p/windswaterflow/ 

[更新 v1.2] 

1、修改当后台无数据返回时一直加载中的bug 

2、增加noSelector选择项,当无数据返回时显示,2秒后隐藏(例子为10页) 

3、增加callback事件,当初次加载和滚动加载成功后回调事件,例子中为绑定鼠标经过事件显示喜欢和评论按钮 

4、demo增加喜欢和评论按钮 

更新后的下载包:http://lijian.net/p/windswaterflow/windswaterflow-v1.2.zip  

 [更新 v1.1] 

1、模版在firefox下报错是因为查找<script id=’tpl’>的错误,具体原因暂不知道 

2、增加boxTemplate参数,直接把模版传进来,用{参数}来表示参数 

3、直接在里面通过match和replace简单替换,没有复杂的json数组替换 

4、增加scroll通过settimeout响应,看起来效果好些,可以去掉 

5、增加page参数,方便用户通过页数和num请求服务端拿box 

6、增加maxPage参数,默认为0,设置为0时则可以无限滚动获取,设置为int值时则当页面达到最大值时不能滚动获取 

更新后的下载包:http://lijian.net/p/windswaterflow/windswaterflow-v1.1.zip   

当Pinterest带来瀑布流后,火起来了,各种各样的网站就开始了瀑布流。本人也是在朋友问起的时候才知道这个东东,之前没时间研究,也就放在一边了,这几天突然又听到这个词语,就找了些资料看了下,像《瀑布流布局浅析》这文章就分析得很不错,网上也已有很多已实现的页成,脚本,插件,比较有名的JQuery插件就是Masonry(http://masonry.desandro.com/)啦,也研究了下不少网友写的各种各样的实现,我也自己写了一个JQuery插件:

实现方法就是绝对定位,其中用到了别人已成熟的优秀的方法,如imgReady,还有一些JQuery插件,如wresize,先看看演示页面吧: 

演示页面:http://lijian.net/p/windswaterflow/ 

下载包:http://lijian.net/p/windswaterflow/windswaterflow-v1.0.zip 

其中: 

初始化可以选择直接用html页面里面的box或者ajaxServer加载box,有数量设置 

滚动到底部可以设置是否自动加载和每次加载的box数量,通过ajaxServer加载box ,ajaxServer例子为php 

用到了imgReady来获取图片的高度值,用到了wresize来解决IE的resize异常问题 

其中有一个问题没有解决,就是模版的问题,用了模版后在firefox和chrome下会报错,暂时还是用拼接字符串实现的,有谁解决了留言告诉我一下 

另外:
我不是经常会更新,如果大家想用,有Bug或有问题请自行修改,希望修改后的地址也留言给我,谢谢

Tags: JQuery , 瀑布流
  • 上一篇:Javascript版的水果老虎机
  • 下一篇:试试Konami Code的神奇
0条评论

暂时没有评论!

发表评论 点击取消评论.

*必填

*必填

分类目录

  • Javascript
  • PHP

近期文章

  • windsformvalid-表单验证JQuery插件
  • Javascript中的==和!=判断
  • 标签云(tagcloud)的球形JQuery插件
  • PHP中in_array奇怪的问题
  • 试试Konami Code的神奇

近期评论

    文章归档

    • 2012年7月
    • 2012年6月
    • 2012年5月
    • 2012年4月

    链接

    • InfoQ
    • V2EX

    功能

    • 登录
    • 条目feed
    • 评论feed
    • WordPress.org
    Copyright © 2012-2020 小A All rights reserved.
    Powered by WordPress. Theme by WPBus. 鄂ICP备11008151号-1