看着好多博客或微博都用上了流体布局,我心里也痒痒..心动不如行动.就折腾下吧.
用了jquery.masonry.min.js.
实现步骤如下:
1/ jquery环境是必须的..我挂的是1.3.2版本,能正常驱动.
2/ 加载masonry.js(放入header.php内)

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.masonry.min.js"></script>

3/ 如果你主题已经加载了其它js文件,把下面代码扔进去.

/* ========= 流体布局设置 ========= */
var $container = $('#content');//div id 设置
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.post'//div id 设置
});
});
//流体布局设置结束

这是针对带有图片的post设置的参数,更多用法.请移步 传送门

4/ 最后就是根据主题修改div id的CSS啦..官方给出的例子是这样的:

.item { // div id
width: 220px;
margin: 10px;
float: left;
}

 * Ctrl+F5刷新看效果..  (js被缓存了,多刷几次. :P)

 
目前有21条回应
Comment
Trackback
Loading ....
  • 本篇文章没有Trackback
你目前的身份是游客,请输入昵称和电邮!