笨猫博客

  • 🍟首页
  • 🍘目录
    • 🥝VPS教程
    • 🍾猫玩技术
    • 🍹干货分享
    • 🍏软件分享
    • 🍩一只猫
  • 🍋工具
    • 🌽IP路由追踪
    • 🍐域名Whois查询
    • 🥘域名被墙查询
    • 🍧IP正常检测
    • 🔥IP端口检测
    • 🍆短网址
    • 🐟VIP音乐播放
    • 🍯KMS激活
  • 🍓链接
  • 🍪联系
  • 🍱登录
    • 🥦登录
    • 🍒注册
关注互联网,生活,音乐,乐此不疲的一只笨猫
  1. 首页
  2. 猫玩技术
  3. 正文

网页瀑布流代码分享

2012-03-22 2841点热度 0人点赞 17条评论

国内的,蘑菇街、点点网、以及淘宝的‘哇哦’ 等都出现了这种参差不齐的多栏布局,倒是挺新颖的~ 在小站上线的Sherf页面,你会看到这种形式的布局。

这种布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。所以,我们给这样的布局起了一个形象的名字 —- 瀑布流式布局。

下面是淘宝哇哦的样式

下面看看我在网路上收集的,两种实现瀑流布局的代码吧!

两种方法调用的图片必须设定高度,否则有错位。

第一种方法很简洁。测试访问

<style type="text/css">
.list { width:935px; margin:0 auto; list-style:none; }
.list li { float:left; display:inline; margin:0 10px 20px 0; padding:6px; border:1px #DDD solid; }
</style>
</head>
<body>
<ul class="list">
<li><a href="#"><img src="images/1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
</ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script>
$(document).ready(function() {
$('.list').masonry({
itemSelector:'.list li',
columnWidth:230
});
});
</script>

 

第二种方法加载的kissy.js高达428KB,而且必须要远程访问kissyui.com,无法本地调用,不清楚神马原因

<script type="text/javascript" src="http://docs.kissyui.com/kissy/build/kissy.js"></script>
<style>
.ks-waterfall{position: absolute;width: 200px;overflow: hidden;padding:6px;border:1px solid #ddd;margin-bottom:20px;}
</style>
</head>
<body>
<div id="container" style="position: relative;">
<div class="ks-waterfall"><img src="1.jpg" width="200" height="300"></div>
<div class="ks-waterfall"><img src="2.jpg" width="200" height="475"></div>
</div>
<script>
KISSY.use("waterfall", function (S, Waterfall) {
new Waterfall({
container: "#container",    //节点容器
minColCount: 2,             //最小列数
colWidth: 240               //每列的宽度
});
});
</script>

 

PS:两组代码,图片链接时一定要加高度哦。不然本地测试OK,放到服务器上,由于加载问题,会错位!

标签: 网页
最后更新:2012-03-22

笨猫

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

  • 宅猫

    宅猫来看看笨猫。哈哈

    2012-03-24
  • 摸鱼网

    http://www.2265.com

    2012-03-31
  • 叮叮

    初次来过,木看懂.............

    2012-04-01
  • 90后奋斗博客

    好东西,多谢分享!

    2012-04-04
  • 蚂蚁在线

    过一段就会审美疲劳了

    2012-04-06
  • Aci

    第一个刚打开有点问题,刷新就好了

    2012-04-08
  • ice

    ice来看过,问下,瀑布流做个网页 可以实现视频分享吗

    2012-04-11
  • py

    是有个BUG。第一次加载的时候是正常的,但是再次刷新的时候会出现块叠在一起的情况,每个图片加上高度属性可以解决这个问题。

    2012-04-12
  • 笨猫

    @ice 可以实现的

    2012-04-14
  • qq空间背景音乐

    这种样式很好看

    2012-04-19
  • 准备网格

    不错,不过第一个测试站点没有了~~~~~~

    2012-06-02
  • 哎呦喂

    不错哦

    2012-06-15
  • 可可新语

    学习啦,摘走之

    2012-07-09
  • 乌龙猫

    乌龙猫(http://www.wulongmao.com)来看看笨猫,O(∩_∩)O~

    2012-08-01
  • 莉嫣时尚

    一直都想实现这样的单页面效果,我去试试看看行不行。

    2013-03-23
  • 小芝麻

    很好的代码、http://16movies.cn/

    2013-07-16
  • 也许你的

    恩,很不错哦http://www.21zxs.com

    2013-08-02
  • 取消回复

    最新 热点 随机
    最新 热点 随机
    中国科幻巨制《流浪地球2》 Chrome修复被2345劫持篡改的主页 GTA6预告片内容泄露:女主在监狱里锻炼身体 《星期三》第二季将有更多亚当斯一家的内容 最新VPS新手教程 SuperForum:轻量的论坛程序
    解禁燃放烟花爆竹,你怎么看?中国科幻巨制《流浪地球2》SuperForum:轻量的论坛程序《星期三》第二季将有更多亚当斯一家的内容GTA6预告片内容泄露:女主在监狱里锻炼身体Chrome修复被2345劫持篡改的主页
    网页瀑布流代码分享 再见 Android Market,你好 Google Play! Teambition:云盘直链解析平台 支持多用户,支持列目录,支持永久直链 时钟田径奥运:龟兔赛跑谁是赢家? 说下VPS常见的技术(OVZ、Xen、KVM)介绍与对比 小猫猫头鹰
    标签聚合
    音乐 日记 域名 OneDrive VPS google 有趣 wordpress
    最近评论
    笨猫 发布于 1 天前(01月28日) q:94-0360231
    T 发布于 5 天前(01月24日) 应该是直接从原服务器下载的,这只是个接口
    阿伯吃的 发布于 6 天前(01月24日) 243527466@qq.com邮箱。听天由命富贵在天
    阿伯吃的 发布于 6 天前(01月24日) 不知过去多少年,还能不能收到链接呢?
    伯伯 发布于 1 周前(01月21日) 怎么联系呢?我的到期了怎么续费呀?
    好友
    • glzjin's blog glzjin's blog
    • ZAERA博客
    • 冰沫记
    • 博客导航
    • 奇它博客
    • 彩虹Smiling的Blog
    • 热闹网
    • 猫腻‘s Blog
    • 猫饭
    • 肥宅之家
    • 萌博
    • 野路子程序员

    COPYRIGHT © 2022 笨猫博客. ALL RIGHTS RESERVED.

    Theme Kratos Made By Seaton Jiang