隽永东方
隽永东方主菜单

WordPress瀑布流布局Masonry解决方案

文章

    瀑布流布局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]

    
    Shopify Free Trial Apply
    Shopify 60天试用
    Shopify 14天试用
      Google Ads 推广
      隽永东方全网营销
      隽永智库