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，就可以套用到別的主題了。