收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 6112|回复: 11

[jquery] 快速搭建瀑布流网站——堆糖瀑布流开源(jQuery)

[复制链接]
发表于 2013-10-14 21:59:11 | 显示全部楼层 |阅读模式
堆糖瀑布流(Woo) jQuery完整版,涵盖以下特点:

o) 数据配置灵活,可在html 里直接放置瀑布流单元(一般只放第一子页)。
o) 数据格式灵活,可处理josn格式的数据(推荐),也可兼容html字符串格式的数据。
o) 独立的数据控制文件 masnunit.js。
o) 同一页面上通过tab 切换植入多个不同类型的瀑布流,切换无刷新。
o) 不同于infinite 瀑布流,可进行翻页控制。子页数量设置无限大时等同于infinite。
o) 至页底时,会预加载下一页第一子页内容。
o) 实现hash 无刷新翻页,并兼容浏览器的前进后退功能。
o) 根据当前环境自动控制瀑布流列数,可自适应屏幕宽度,也可通过 data-domwidth 设置固定宽度。
o) 可采用 sink 模式,在瀑布流左侧或右侧第一列嵌入外部区块。
o) 可配置直接向前(后)翻页的小翻页器。
o) 自带回到顶部功能,并能控制距离顶部的准确位置,准确说是回到预埋锚点的位置(可设置偏移量)。
o) 强大的 window resize 自动重绘功能(IE下不建议打开此功能)。
o) 可通过配置参数激活特殊列(只能是最左或最右列),此列宽度可不同于其它列。
o) 灵活的参数设置,比如:子页数量、子页内单元数量、瀑布流单元宽度和间距 等等等等。


GitHub地址,搜索 waterfall 即可找到,内附demo 演示地址。

 楼主| 发表于 2013-10-16 10:14:46 | 显示全部楼层
hulangfy 发表于 2013-10-15 16:06
帮忙发个:github.com/duitang/waterfall

太感谢了,这思路不错,后面的同学请看静态呢demo :

duitang.com/app/woo/examples/specialcol.html
回复 支持 反对

使用道具 举报

发表于 2013-10-15 16:06:20 | 显示全部楼层
balibell 发表于 2013-10-14 22:35
不能发链接地址哈,只能去 GitHub 搜索了。

帮忙发个:github.com/duitang/waterfall
回复 支持 1 反对 0

使用道具 举报

 楼主| 发表于 2013-10-14 22:35:38 | 显示全部楼层
不能发链接地址哈,只能去 GitHub 搜索了。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-10-15 17:09:20 | 显示全部楼层
太感谢了,我的积分比你高耶,为什么我不能发?

发个演示demo:
http://www.duitang.com/app/woo/examples/specialcol.html
回复 支持 反对

使用道具 举报

发表于 2013-10-15 22:45:32 | 显示全部楼层
请问可以动态更新图片内容么,连接数据库
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-10-16 10:09:35 | 显示全部楼层
447677998 发表于 2013-10-15 22:45
请问可以动态更新图片内容么,连接数据库

开源的只是前端框架部分,数据使用的模拟数据。找个后台开发提供接口,很容易就能实现动态内容了。
把请求地址放在底部的 <form id="woo-form-xxx" action="{这里放请求地址去掉page数}" >,
然后在 masnunit.js 里将返回数据连成html 字符串即可。

接口示例一个:
http://xxx.com/woo/?page=1
返回数据格式:
  1. {
  2.         "success":true,
  3.         "data":{"blogs":[
  4.                 /*单元数据*/
  5.         ],
  6.         "hasrp":true,"has_next":true,"pgsource":"tp_","nopth":false}
  7. }
复制代码
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-10-16 10:10:17 | 显示全部楼层
本帖最后由 balibell 于 2013-10-16 10:12 编辑

开源的只是前端框架部分,数据使用的模拟数据。找个后台开发提供接口,很容易就能实现动态内容了。
把请求地址放在底部的 <form id="woo-form-xxx" action="{这里放请求地址去掉page数}" >,
然后再 masnunit.js 里将返回数据连成html 字符串即可。

接口示例一个:
xxx.xxx/woo/?page=1
返回数据格式:
  1. {
  2.         "success" : true,
  3.         "data" : {
  4.                 "blogs":[
  5.                         /*这里是单元数据*/
  6.                 ],
  7.                 "has_next":true
  8.         }
  9. }
复制代码
回复 支持 反对

使用道具 举报

发表于 2013-10-16 11:30:39 | 显示全部楼层
正需要瀑布流的东西呢,哈哈
回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-10-16 11:56:27 | 显示全部楼层
devillq 发表于 2013-10-16 11:30
正需要瀑布流的东西呢,哈哈

有问题可以联系我。
回复 支持 反对

使用道具 举报

发表于 2013-10-16 22:43:14 | 显示全部楼层
这个瀑布流功能强大,值得研究!
回复 支持 反对

使用道具 举报

发表于 2013-10-29 10:57:04 | 显示全部楼层
本帖最后由 447677998 于 2013-10-29 10:58 编辑
balibell 发表于 2013-10-16 11:56
有问题可以联系我。


balibell,你好

請問可以不给定图片的高度么,我不给图片或包含图片那个div的高度时,瀑布流就叠在一起了,见图,左边给了高度正常,右边没给高度,叠在一起了,我是想设置width=200,高度让它自己生成

PS:,我是把数据库的信息以json格式传给DEBUG_DATA,你所说的form接收数据不会用,刚入行,菜鸟来着 -_-

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-7-11 23:11 , Processed in 0.155854 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表