[教程]通过Isotope+Bootstrap+InfiniteScroll制作全worpdress瀑布流布局

目前瀑布流已经成为一直流行的网页布局。非常漂亮。但我们如何拥有这样的布局呢。下面就是相关的教程。让你能拥有漂亮的瀑布流布局，而且还得响应式的。这是必须的。

1、所需材料

Isotope v2 beta .
Twitter Bootstrap (可以使用Bootstrap的CDN或是下载到本地)
Infinite Scroll
imagesLoaded
WP Imager

以上文件我们下载下来，并把相关的js文件放在inc-custom文件夹下面的js目录内。

2、准备工作

为了方便描述教程。我们采用wordpress主题的twentyfifteen自带主题来进行讲解。为了最大程度的不改变原主题的的结构和代码。我们采用独立页面来实施。

首先，我们在twentyfifteen主题文件夹下新建一个目录，命名为inc-custom。这个目录就是我们此教程的所有文件所在的文件夹，具体的结构和内容见下图。

3、加载js和css方法

（1）全局加载。打开fn-inc.php。输入以下代码：

function add_isotope() {
    wp_register_script( 'bootstrap', get_template_directory_uri().'/inc-custom/js/bootstrap.min.js', array('jquery'),  true );
wp_register_script( 'isotope', get_template_directory_uri().'/inc-custom/js/isotope.pkgd.min.js', array('jquery'),  true );
wp_register_script( 'imagesloaded', get_template_directory_uri().'/inc-custom/js/imagesloaded.pkgd.min.js', array('jquery'),  true );
wp_register_script( 'infinitescroll', get_template_directory_uri().'/inc-custom/js/jquery.infinitescroll.min.js', array('jquery'),  true );

    wp_register_script( 'custom-init', get_template_directory_uri().'/inc-custom/js/customjs.js', array('jquery', 'custom'),  true );

    wp_register_style( 'custom-css', get_stylesheet_directory_uri() . '/inc-custom/css/isotope.css' );

    wp_enqueue_script('custom-init');
    wp_enqueue_style('custom-css');
}

add_action( 'wp_enqueue_scripts', 'add_isotope' );

（2）、如果我们只在单个页面上，比如说我们的独立页面homepage.php，则采用这样的js加载方式。

/** Adding Scripts To A Unique Page */  
function myScripts() {
    if ( is_page_template( 'inccustom/homepage.php' ) ) {  
//加载JS和css。同上。
    }  
}  
add_action( 'wp_enqueue_scripts', 'myScripts' );

4、核心代码

（1）、在homepage.php中获取最新文件兼瀑布流样式。

<?php 
/**
 * Template name: home page
 * Description:   A home page
 */
get_header();

?>

<!-- Start latest post -->
<div id="iso" class="loop-recent">
<div class="row">
<?php $latest_post = get_posts( 'numberposts=8' ); // Defaults args fetch posts starting with the most recent ?>
<?php foreach( $latest_post as $post ) : setup_postdata( $post ); ?>
<div class="post col-xs-12 col-sm-6 col-md-3 col-lg-3">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php
// Post thumbnail.
twentyfifteen_post_thumbnail();
?>

<header class="entry-header">
<?php
if ( is_single() ) :
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
endif;
?>
</header><!-- .entry-header -->

<div class="entry-content">
<?php
/* translators: %s: Name of current post */the_content( sprintf(
__( 'Continue reading %s', 'twentyfifteen' ),
the_title( '<span class="screen-reader-text">', '</span>', false )
) );

wp_link_pages( array(
'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',
'after'       => '</div>',
'link_before' => '<span>',
'link_after'  => '</span>',
'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',
'separator'   => '<span class="screen-reader-text">, </span>',
) );
?>
</div><!-- .entry-content -->

<?php
// Author bio.
if ( is_single() && get_the_author_meta( 'description' ) ) :
get_template_part( 'author-bio' );
endif;
?>

<footer class="entry-footer">
<?php twentyfifteen_entry_meta(); ?>
<?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
</footer><!-- .entry-footer -->

</article><!-- #post-## -->
</div>

<?php endforeach; ?>
<?php wp_reset_query(); ?>
</div>


<?php get_footer(); ?>

（2）css样式。把以下代码加入inc-custom目录下的css下的isotope.css。

#iso {
    margin: 0 auto;
    width: 100%;
}
 
/* Browser Support of ':first-of-type' pseudo-class
Chrome Safari Firefox  Opera IE Android   iOS
Works  3.2+  Works   9.5+ 9+  Works  Works
*/#iso .row:first-of-type {
  margin: 0;
}
 
.post {
    margin: 10px 0;
    max-width: 100%;
    padding: 0;
}
 
.post .content {
    padding: 20px;
}
 
/* 
* PAGINATION
*/.pagination {
    display: none;
    visibility: hidden;
}
 
/* 
* MEDIA QUERIES
*/ 
@media (min-width: 768px) and (max-width: 980px) {
  #iso .col-md-3, #iso .col-lg-3 {
    width: 300px;
  }
}
 
@media (min-width: 980px) and (max-width: 1300px) {
  #iso .col-md-3, #iso .col-lg-3 {
    width: 350px;
  }
}
 
@media (min-width: 1300px) {
  #iso .col-md-3, #iso .col-lg-3 {
    width: 400px;
  }
}

（3）自定义js，把以下代码加入inc-custom目录下的js下的customjs.js。

<script>
$(document).ready(function() {
 
var $container = $('#iso');
       
        // Fire Isotope only when images are loaded
$container.imagesLoaded(function(){
$container.isotope({
itemSelector : '.post',
masonry: {
isFitWidth: true,
gutter: 20
}
        });
    });
 
// Infinite Scroll
$('#iso').infinitescroll({
navSelector  : 'div.pagination', 
nextSelector : 'div.pagination a:first', 
itemSelector : '.post',
bufferPx     : 200,
loading: {
finishedMsg: 'We\'re done here.',
                        //img: +templateUrl+'ajax-loader.gif'
}
},
 
// Infinite Scroll Callback
function( newElements ) {
var $newElems = jQuery( newElements ).hide(); 
$newElems.imagesLoaded(function(){
$newElems.fadeIn();
$container.isotope( 'appended', $newElems );
});
});
 
});
</script>
 
<!--[if lte IE 8]>
<script>
$(document).ready(function() {
// IE8 compatibility of pseudo-class
$('#iso .row').first().css({margin:'0'});
});
</script>
<![endif]-->

（4）所有的准备工作都已经完成。最后一步就是我们在主题中调用上面的说有内容。打开主题的functions.php文件。在开头或是末尾插入以下代码即可

require get_stylesheet_directory() . '/inc-custom/fn-custom.php';

为什么要这么做呢。因为在主题升级后，我们只需要修改这一句话即可使用我们以前所有的自定义内容了。css具体细节和样式请自行设计。这里就不做详细描述了

5、教程相关文件下载。

此教程的所有文件打包下载。