瀑布流布局Masonry有非常完善的方案了,主要问题就是,WordPress升级到4.0以后,Masonry 也要相应从V2升级到V3版本,否则是无法工作的,具体代码实现如下:
<script type=”text/javascript” src=”<?php bloginfo(“template_directory”);?>/js/jquery.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(“template_directory”);?>/js/masonry.pkgd.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(“template_directory”);?>/js/imagesloaded.pkgd.min.js”></script>
<script type=”text/javascript”>
$(function(){
// Masonry Trigger
var $container = jQuery(‘#container’);
jQuery(‘#container’).imagesLoaded( function() {
$container.masonry({
itemSelector: ‘.box’,
columnWidth: 120,
animate: true
});
});
})
</script>
<div id=”container”>
<div class=”box”></div>
<div class=”box”></div>
<div class=”box”></div>
…………
</div>
以上jquery.js masonry.pkgd.js imagesloaded.pkgd.min.js请在以下地址上下载:
[wpdm_package id=23]