笨猫博客

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

网页瀑布流代码分享

2012-03-22 4751点热度 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
  • razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
    取消回复

    最新 热点 随机
    最新 热点 随机
    简洁、纯HTML导航项目:XG-NAV(开源) outlook邮箱安全修改方案,让你的邮箱安全无忧 Docker容器一键全自动迁移脚本 永久免费 qzz.io 域名 可托管至CloudFlare SSL 证书申请工具 | 免费 HTTPS 证书网页在线申请 Let's Encrypt、ZeroSSL 等 HTTPS 证书 免登录 Afilmory - 一个现代化照片画廊网站
    Docker容器一键全自动迁移脚本outlook邮箱安全修改方案,让你的邮箱安全无忧简洁、纯HTML导航项目:XG-NAV(开源)
    Songza——另类的音乐搜索引擎 Google 将调低侵权网站搜索结果排名 涂改网:轻量级在线图片编辑器 流媒体(奈飞&迪斯尼等)一键修改解锁DNS脚本 SSH教程CHROME+BitviseTunnelier Google 宣布将收购 Motorola Mobility
    最近评论
    vip券网 发布于 3 周前(08月01日) 写的很详细,赞 :razz: :evil:
    萧瑟 发布于 1 个月前(07月14日) 这个我也用了好久,不知道啥时候能上IP证书
    梵蒂冈 发布于 1 个月前(07月08日) 士大夫
    HuangWei 发布于 2 个月前(06月16日) 自己手动设置确实很烦,我之前使用过这个,感觉还不错,虽然已经不怎么维护了:https://githu...
    龙笑天 发布于 3 个月前(05月25日) 一直用的萌咖的路过 :smile:
    标签
    elliptictrue100.10.02
    BLOG ChatGPT Chrome CloudFlare DirectAdmin github Godaddy google kloxo Linux OneDrive OneIndex PHP QQ shadowsocks SNS ssh Typecho VPS web2.0 whmcs Windows wordpress 一键脚本 下载 免费 博客 图文教程 图标 图片 域名 头像 奥运 宝塔面板 插件 教程 日记 有趣 浏览器 游戏 猫 生活 电影 百度 网站 视频 设计 软件 阿里云盘 音乐
    好友
    • glzjin's blog glzjin's blog
    • ZAERA博客
    • 冰沫记
    • 奇它博客
    • 猫腻‘s Blog
    • 猫饭
    • 肥宅之家
    • 萌博
    • 野路子程序员

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

    Theme Kratos Made By Seaton Jiang