隽永东方设计工作室
Eastern Design Studio Menu

WordPress瀑布流布局Masonry解决方案

   WordPress相关教程隽永东方内训教程   标签: MasonryWordPress   923   //   评论数   //   参与数
瀑布流布局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]

       

头像 隽永东方创始人 & CEO
生于福建长汀,学于海滨大连,创业于国际都市上海,隽永东方设计工作室创始人兼CEO,喜欢音乐、运动、旅游,热心公益事业,在网站设计开发和运营数据中心等领域皆有多年从业经验,独特的国际视角,以客户为中心,视客户需求为核心价值观……

Call Me   Email Us   Weibo       Google+   LinkedIn

作者:


  售前在线询价单
  全网营销套餐
  隽永东方学院