/*
Template? Name: Waterfall Flow Test
*/
//Based on Wordpress's own 20 14 theme.
//Contributor: Suifengtecsuoling.net
What if? (! ? function _ exists(' cool WP _ scripts _ masonry ')？ )? ：
What if? (? ! ? is_admin()？ )? ：
Function? coolwp_scripts_masonry()？ {
//logout? Built? Are you online? Masonry? Since? It? Is it? Old? Version? 3.
WP _ de register _ script(' jquery-masonry ')；
//Please download it yourself.
WP _ enqueue _ script(' jquery- 10. 1 . js '，？ get_template_directory_uri()。 /test/jquery.js '，？ Array (? imagesLoaded ')，？ null，？ Really? );
//Please download it yourself.
WP _ enqueue _ script(' images loaded '，？ get_template_directory_uri()。 /test/imagesloaded.pkgd.min.js '，？ Fake? null，？ True);
//Please download it yourself.
WP _ enqueue _ script(' jquery-masonry '，？ get_template_directory_uri()。 /test/masonry.pkgd.min.js '，？ Array (? imagesLoaded ')，？ null，？ Really? );
//I'll post it later
wp_enqueue_script('custom.js '，？ get_template_directory_uri()。 /test/custom.js '，？ Array (? imagesLoaded ')，？ null，？ Really? );
}
//wp_enquqe_style ('masonry',? get_template_directory_uri()。 /test/')；
Add _ Action (? wp_enqueue_scripts '，？ coolwp_scripts_masonry '？ );
endif？ //! ? is_admin()
endif？ //! ? Coolwp _ scripts _ masonry? Does it exist?
get _ header()； & gt
& ltdiv？ Id= "main content"? class="main-content " >
& lt？ Server-side programming language (abbreviation of professional hypertext preprocessor)
What if? (? is_front_page()？ & amp& amp？ twenty fourth _ has _ featured _ posts()？ )? {
//? Including? That? Features? Content? Template.
Get _ Template _ Part (? Featured content? );
}
& gt
& ltdiv？ Id= "main"? class="content-area " >
& ltdiv？ Id= "content"? Class= "website content"? role="main " >
& lt？ Server-side programming language (abbreviation of professional hypertext preprocessor)
$args=array(？ Post _ type' => postal service? );
$myloop=new？ WP_Query(？ $args？ );
//? Start? That? Cycle.
What time? (? $ my loop-& gt； have_posts()？ )? :$ my loop-& gt； _ post()；
//? Including? That? Peggy? Content? Template.
& gt
& ltdiv？ class="item " >
& lt？ Server-side programming language (abbreviation of professional hypertext preprocessor)
What if? (? has_post_thumbnail()？ )? :& gt
& ltdiv？ Class= "masonry-thumbnail" >
& lt answer? href = " & lt？ php？ _permalink()>？ title = " & lt？ php？ _ title()； >& gt
& lt？ php？ _post_thumbnail ('thumbnail'); & gt& lt/a & gt；
& lt/div & gt； & lt！ -.masonry-thumbnail->;
& lt？ php？ endif& gt
& ltdiv？ Class= "Masonry-Details" >
& lth5 & gt& lt answer? href = " & lt？ php？ _permalink('？' ))& gt"? title = " & lt？ php？ _ title()； & gt">& lt span? class="masonry-post-title " >？ & lt？ php？ _ title()； & gt& lt/span>。 & lt/a & gt； & lt/H5 & gt；
& lt！ -& lt； div？ class = " masonry-post-extract " >
& lt？ php？ _ extract()； & gt
& lt/div & gt； ? -& gt； & lt！ -.masonry-after-excerpt->;
& lt/div & gt； & lt！ -/.Masonry-Entrance-Details? -& gt；
& lt/div & gt； & lt！ -/.Items? -& gt；
& lt？ php？ endwhile& gt
& lt/div & gt； & lt！ - ? # Content? -& gt；
& lt/div & gt； & lt！ - ? # Elementary? -& gt；
& lt？ php？ //get_sidebar(？ Content? ); & gt
& lt/div & gt； & lt！ - ? # Main content? -& gt；
& lt？ Server-side programming language (abbreviation of professional hypertext preprocessor)
get _ sidebar()；
get _ footer()； Custom.js code:
var？ Container? =? document . query selector(“# content”)；
var？ msnry？ =? New? Masonry (? Container,? {
Column width:? 200,
itemSelector:？ . Project'
});
/* alert(' aaaaa ')； */Put the three js files you downloaded and the above custom.js in the test folder (built by yourself) under the 20 14 theme directory of your WP, and then copy the above PHP code into a PHP file starting with English, and put this PHP file in the 20 14 theme directory of WP.
Enable this theme, publish the page, and select the Waterfall Test page template. If there are articles in your test WP and they have thumbnails, it will look like this:
Only need to modify the query statement and css, it can be applied to other topics.