如何在wordpress网站添加瀑布流单页模板

我想在wordpress主题里加入一个瀑布流单页，效果如图。在网上曾经找过一些资料，说利用jQuery Masonry 插件来做，但没能做出来，希望如果对这方面比较熟悉的朋友可以告知。赏50金币，嘻嘻

推荐答案 2014-02-14

<?php
/*
TEMPLATE NAME:瀑布流测试
*/
//基于Wordpress自带的2014主题
//贡献者：Suifengtec  suoling.net
if (! function_exists('coolwp_scripts_masonry') ) :
if ( ! is_admin() ) :
function coolwp_scripts_masonry() {
    //deregister built in masonry since it is old version 3.
   wp_deregister_script('jquery-masonry');
   //请自行下载
    wp_enqueue_script('jquery-10.1.js', get_template_directory_uri().'/test/jquery.js', array( 'imagesLoaded'), null, true );
       //请自行下载
    wp_enqueue_script('imagesLoaded', get_template_directory_uri().'/test/imagesloaded.pkgd.min.js', false, null, true);
       //请自行下载
    wp_enqueue_script('jquery-masonry', get_template_directory_uri().'/test/masonry.pkgd.min.js', array( 'imagesLoaded'), null, true );
       //后面我贴出来
    wp_enqueue_script('custom.js', get_template_directory_uri().'/test/custom.js', array( 'imagesLoaded'), null, true );
}

//wp_enquqe_style('masonry', get_template_directory_uri().'/test/');

add_action( 'wp_enqueue_scripts', 'coolwp_scripts_masonry' );
endif; //! is_admin()
endif; //! coolwp_scripts_masonry exists?
get_header(); ?>

<div id="main-content" class="main-content">

<?php
if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
// Include the featured content template.
get_template_part( 'featured-content' );
}
?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">

<?php
$args=array( 'post_type'=>'post' );
$myloop=new WP_Query( $args );
// Start the Loop.
while ( $myloop->have_posts() ) :  $myloop->the_post();

// Include the page content template.
?>

<div class="item">
<?php
if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
        <?php the_post_thumbnail('thumbnail'); ?></a>
    </div>
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
       
    </div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php //get_sidebar( 'content' ); ?>
</div>

<?php
get_sidebar();
get_footer();

custom.js代码：

var container = document.querySelector('#content');
var msnry = new Masonry( container, {
columnWidth: 200,
itemSelector: '.item'
});

/*alert('aaaaa');*/

将你下载到的三个js文件和上面的custom.js放在你的WP的2014主题目录下的test文件夹（自己建），然后将上面的PHP代码复制到一个英文开头的PHP文件里，把这个PHP文件放在WP的2014主题目录下，

启用这个主题，发布页面，选用“瀑布流测试”页面模板，如果你的测试WP中有文章，并且文章有缩略图，就会是这个样子：