自适应的网格布局-砌墙效果
2011-11-26 16:04
597 查看
我们使用新浪微博的时候,在“微博精选”页面里可以看到大量的微博信息。该页面信息主要是以图片配文字说明,页面使用了自适应网格布局即砌墙效果,图片加载技术,以及滚动加载内容技术。本文先介绍砌墙效果。
查看演示 下载源码
其实我们做页面布局就相当于砌墙师傅在完成一堵墙的施工。我们在设计页面的时候,假如有很多相同的DIV,装载不同的内容,这些DIV都使用float:left,如果不限制这些DIV的高度,页面布局可能会出现砌墙架空的现象。点击这里查看效果,而经过布局优化后的页面布局效果大不一样,请看DEMO。
本文使用David DeSandro写的一个页面布局插件Masonry,该插件基于jQuery库,提供很多参数和方法,可以根据不同的需求定制不同的效果。
XHMTL
首先是要引入jQuery库和Masonry插件。
我们仿照新浪微博构建一个html页面,DIV#container放置多个相同的DIV.photo。
CSS
jQuery
调用masonry插件,配置参数itemSelector对应的是class为photo的div,columnWidth为247,columnWidth的值是由.photo的宽度+padding*2+margin*2+border*2得到的。更多参数配置请访问masonry插件网站:http://masonry.desandro.com/docs/options.html
本文只介绍砌墙布局,接下来我会抽时间结合本文把图片加载技术和滚屏加载技术相关文章发布在helloweb.com博客里,敬请关注。
查看演示 下载源码
其实我们做页面布局就相当于砌墙师傅在完成一堵墙的施工。我们在设计页面的时候,假如有很多相同的DIV,装载不同的内容,这些DIV都使用float:left,如果不限制这些DIV的高度,页面布局可能会出现砌墙架空的现象。点击这里查看效果,而经过布局优化后的页面布局效果大不一样,请看DEMO。
本文使用David DeSandro写的一个页面布局插件Masonry,该插件基于jQuery库,提供很多参数和方法,可以根据不同的需求定制不同的效果。
XHMTL
首先是要引入jQuery库和Masonry插件。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.masonry.min.js"></script>
我们仿照新浪微博构建一个html页面,DIV#container放置多个相同的DIV.photo。
<div id="container"> <div class="photo"> <a href="#"><img src="images/02.jpg" alt="" /></a> <p><a href="#">菓小菓</a>:随时都要卖,还要又又美味</p> </div> .....N个photo... </div>
CSS
#container{width:780px; margin:10px auto} .photo{float:left; width:205px; margin:10px; padding:10px; border:1px solid #d3d3d3; background:#f7f7f7;-moz-border-radius:4px;-khtml-border-radius: 4px;-webkit-border-radius: 4px; border-radius:4px;} .photo img{width:205px} .photo p{line-height:20px; margin:4px auto}
jQuery
$(function(){ $('#container').masonry({ itemSelector : '.photo', columnWidth : 247 }); });
调用masonry插件,配置参数itemSelector对应的是class为photo的div,columnWidth为247,columnWidth的值是由.photo的宽度+padding*2+margin*2+border*2得到的。更多参数配置请访问masonry插件网站:http://masonry.desandro.com/docs/options.html
本文只介绍砌墙布局,接下来我会抽时间结合本文把图片加载技术和滚屏加载技术相关文章发布在helloweb.com博客里,敬请关注。
相关文章推荐
- 自适应的网格布局-砌墙效果
- Android网格布局(GridView)---实现漂亮的多选效果
- Android网格布局GridView实现漂亮的多选效果
- 自适应网格布局DashboardLayout改写
- (android控件)界面布局实现GridView(网格效果)
- Weex实现GridView的网格布局以及浮层效果
- Android网格布局(GridView)---实现漂亮的多选效果
- 帧布局实现霓虹灯效果
- [转]通过UICollectionView创建网格布局
- 63、具有过渡动画效果的布局Layout
- Android平板上类似于电脑的网格布局一种实现策略
- iOS AutoLayout自动布局中级开发教程(4)-label等文字自动适应大小,宽度
- swing 学习笔记十二(网格布局GridLayout)
- Android网格布局(GirdView)学习
- android之网格布局和线性布局实现注册页面
- 自定义HorizontalScrollView结合FlowLayout实现流式布局翻页效果
- java布局——网格布局
- Layout动画:在android布局发生变化时添加动画效果
- 常用的网页布局方法单侧固定另一侧适应充满
- 图片和DOM元素网格布局jQuery插件