瀑布流效果怎么实现

登录网站的后台。首先访问域名/adminphp用管理员账号直接登录自己discuz网站的后台。

登录后台后，在网站的后台找到 “界面” 按钮，下的界面设置，点击主题列表页按钮，出现设置界面，首先一般将“左侧版块导航宽度”设置为0。

往下拉，在主题封面宽度的设置里一般设置为 208，也可以自己修改成其他的，主题封面高度设置一般为 9999。

在网站后台 找到[论坛]栏目下面的[版块管理]按钮，选择编辑自己想要开启瀑布流的那个版块，在该模块的 [扩展设置] 里 开启列表模式。

很多时候，设置的瀑布流的模块已经有帖子了，此时可以重建主题封面实现： 在后台的[工具]设置栏目下找到[更新统计]按钮，点击[重建主题封面]就可以了。

更新缓存，到相应的模块查看瀑布流效果。

<php

/

TEMPLATE NAME:瀑布流测试

 /

//基于Wordpress自带的2014主题

//贡献者：Suifengtec  suolingnet

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-101js', get_template_directory_uri()'/test/jqueryjs', array( 'imagesLoaded'), null, true );

       //请自行下载

    wp_enqueue_script('imagesLoaded', get_template_directory_uri()'/test/imagesloadedpkgdminjs', false, null, true);

       //请自行下载

    wp_enqueue_script('jquery-masonry', get_template_directory_uri()'/test/masonrypkgdminjs', array( 'imagesLoaded'), null, true );

       //后面我贴出来

    wp_enqueue_script('customjs', get_template_directory_uri()'/test/customjs', 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><!--masonry-thumbnail-->

<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 class="masonry-post-excerpt">

           <php the_excerpt(); >

       </div> --><!--masonry-post-excerpt-->

    </div><!--/masonry-entry-details -->

</div><!--/item -->

<php endwhile; >

</div><!-- #content -->

</div><!-- #primary -->

<php //get_sidebar( 'content' ); >

</div><!-- #main-content -->

<php

get_sidebar();

get_footer();

customjs代码：

var msnry = new Masonry( container, {

  columnWidth: 200,

  itemSelector: 'item'

});

/alert('aaaaa');/

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

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

只需要你改下查询语句和css，就可以套用到别的主题了。

discuz的官方默认是有了帖子列表瀑布流的这个功能的，不需要添加插件，discuz自身就可以实现了，discuz是越来越强大了。但是强大的同时，很多功能隐藏的比较深，对于新手来说，很多都不会用。经常遇到一些朋友不知道如何设置瀑布流。下面我一步一步教给大家

登录自己网站的后台。首先访问http://你的域名/adminphp用管理员账号直接登录自己discuz网站的后台

登录后台后，在网站的后台找到 界面 按钮，下的界面设置，点击主题列表页按钮，出现设置界面，首先一般将“左侧版块导航宽度”设置为0

往下拉，在主题封面宽度的设置里我们一般设置为 208，你也可以自己修改成其他的，主题封面高度设置一般为 9999

在网站后台 找到[论坛]栏目下面的[版块管理]按钮，选择编辑自己想要开启瀑布流的那个版块，在该模块的 [扩展设置] 里 开启列表模式。

很多时候，我们设置的瀑布流的模块已经有帖子了，怎么办呢？别急我们可以重建主题封面实现： 在后台的[工具]设置栏目下找到[更新统计]按钮，点击[重建主题封面]就可以拉

更新缓存，到相应的模块查看瀑布流效果吧