注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

网页瀑布流代码分享  

2012-05-24 18:18:44|  分类: 视觉设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自:数字人生

国内的,蘑菇街、点点网、以及淘宝的‘哇哦’ 等都出现了这种参差不齐的多栏布局,倒是挺新颖的~ 在小站上线的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,放到服务器上,由于加载问题,会错位!

—-原创文章,转载请注明出处。

打包下载

  评论这张
 
阅读(729)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018