好看的瀑布流网站源码（网站瀑布流是什么意思）

今天给各位分享好看的瀑布流网站源码的知识，其中也会对网站瀑布流是什么意思进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、前端之瀑布流布局（多种实现方案）
• 2、如何在wordpress网站添加瀑布流单页模板
• 3、wordpress制作照片瀑布流的效果，如何实现？

前端之瀑布流布局（多种实现方案）

瀑布流布局，一般指根据内容高度自适应填充到某一列以使整体页面和谐，常见的有图片网站，比如每一行每一列的内容是错开的。

瀑布流布局一般是下面这个样子

css中有这么两个属性:

注意

这也是我推荐大家用第一种方法的最主要原因。

这种方案做出来的效果有点奇葩，特殊的应用场景可能会用到，最终效果是横向瀑布流

flex布局中有一个属性 flex-flow ,指明在哪个方向上在长度不够的情况想拆行，详情大家自己查阅

第一种方法其实是最合适的，也是对开发人员要求最高的，即使有思路与算法在开发过程中也会踩很多坑，比如（1）图片预加载，（2）querySelector取元素居然获取不到，（3）使用box-sizing简化计算过程降低复杂性，等等。 box-sizing 属性用好了非常高效，推荐大家去仔细看看

第二种方法其实也可行，但是不推荐

第三种方法就有点扯了，估计不常用到，大家看看就行

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

?php

/*

TEMPLATE NAME:瀑布流测试

 */

//基于Wordpress自带的2014主题

//贡献者：Suifengtec  suoling.net

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-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_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"

        h5a 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();

custom.js代码：

var container = document.querySelector('#content');

var msnry = new Masonry( container, {

  columnWidth: 200,

  itemSelector: '.item'

});

/*alert('aaaaa');*/

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

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

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

wordpress制作照片瀑布流的效果，如何实现？

wordpress是开源的一款博客系统，你可以网上下载wordpress瀑布流主题，然后选择在线安装。便利完全可以达到你自己想要的效果，可以对模版进行编辑修改，很方便。

不过要做一个自己的模板，则需要你有一定的专业知识。比如你至少要懂的标准通用标记语言下的一个应用HTML代码、CSS、PHP等相关知识。

好看的瀑布流网站源码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于网站瀑布流是什么意思、好看的瀑布流网站源码的信息别忘了在本站进行查找喔。