phpjquery瀑布流代码

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

<?php
/*
TEMPLATENAME:瀑布流测试
*/
//基于Wordpress自带的2014主题
//贡献者：Suifengtecsuoling.net
if(!function_exists('coolwp_scripts_masonry')):
if(!is_admin()):
functioncoolwp_scripts_masonry(){
//.
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_masonryexists?
get_header();?>

<divid="main-content"class="main-content">

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

			<?php
				$args=array('post_type'=>'post');
				$myloop=newWP_Query($args);
				//StarttheLoop.
				while($myloop->have_posts()):$myloop->the_post();

					//Includethepagecontenttemplate.
?>

<divclass="item">
<?php
if(has_post_thumbnail()):?>
<divclass="masonry-thumbnail">
<ahref="<?phpthe_permalink()?>"title="<?phpthe_title();?>">
<?phpthe_post_thumbnail('thumbnail');?></a>
</div><!--.masonry-thumbnail-->
<?phpendif;?>
<divclass="masonry-details">
<h5><ahref="<?phpthe_permalink('')?>"title="<?phpthe_title();?>"><spanclass="masonry-post-title"><?phpthe_title();?></span></a></h5>
<!--<divclass="masonry-post-excerpt">
<?phpthe_excerpt();?>
</div>--><!--.masonry-post-excerpt-->
</div><!--/.masonry-entry-details-->
</div><!--/.item-->
	<?phpendwhile;?>
		</div><!--#content-->
	</div><!--#primary-->
	<?php//get_sidebar('content');?>
</div><!--#main-content-->

<?php
get_sidebar();
get_footer();

custom.js代码：

varcontainer=document.querySelector('#content');
varmsnry=newMasonry(container,{
columnWidth:200,
itemSelector:'.item'
});

/*alert('aaaaa');*/

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

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

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