CSS瀑布流

一、CSS瀑布流布局

CSS瀑布流布局是一种常见的网站布局，通过多列不定宽度的块状元素，使得页面上的内容呈现出瀑布流式的效果。在CSS布局中，最常见的瀑布流布局实现方式是通过设置多列的float来实现。

.container {
  width: 1000px;
  margin: 0 auto;
}

.column {
  width: 30%;
  margin-right: 3%;
  float: left;
}

.item {
  width: 100%;
  background-color: #f5f5f5;
  margin-bottom: 20px;
  padding: 20px;
}

以上代码是一个三列的瀑布流布局，每个块状元素（item）都是100%宽度，且设置了背景颜色，下方设置了20px的margin-bottom和20px的padding，使得多个元素之间有一定的间隔。

二、CSS瀑布流插空

在浏览器宽度不固定情况下，瀑布流布局可能会出现列与列之间空隙不一致的问题，这时我们需要使用CSS瀑布流插空技术。

.container {
  column-width: 30%;
  column-gap: 3%;
}

以上代码使用CSS3的column-width属性和column-gap属性来定义每列宽度和列之间的间隔，不仅可以自动填充空隙，还能实现响应式布局。

三、CSS瀑布流是什么意思

瀑布流是模仿自然界中的瀑布落差效果而得名。在设计上，将多个内容块状元素排列在一起，形成一个流畅的视觉效果，即为瀑布流。在Web开发中，瀑布流就是指元素以类似瀑布落差的形式排布，使得页面具有更好的视觉效果，提升用户体验。

四、CSS瀑布流 菜鸟

对于初学者来说，想要掌握CSS瀑布流可能有点困难。但是，百度、淘宝等著名网站常使用此布局方式进行页面搭建，使用瀑布流布局可以极大地提升页面的体验度。如果想要更方便的学习CSS瀑布流，可以尝试使用一些成熟的第三方插件，例如Masonry和Isotope等。

五、CSS瀑布流横向

默认情况下，瀑布流是以垂直方向进行展示的，但我们也可以通过代码实现横向瀑布流布局。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-grow: 1;
  width: 33.33%;
  height: 200px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  padding: 20px;
  box-sizing: border-box;
}

以上代码使用CSS3的flex布局来实现横向的瀑布流布局，每个项目（item）宽度为33.33%，通过设置flex-grow属性实现自适应，同时设置了高度和间距。

六、CSS瀑布流效果

CSS瀑布流布局通常用于展示图片，因此实现的CSS瀑布流效果会影响网站的整体视觉效果。可以通过调整CSS的属性值，来实现不同的瀑布流效果，例如图片悬停变色、添加悬停播放按钮等。

.item:hover {
  background-color: #D9D9D9;
}

.item:hover .play {
  background-color: rgba(255, 255, 255, 0.5);
  display: block;
}

.play {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  background: url('https://example.com/play.png') no-repeat center center;
  background-size: 40%;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7), 0 0 0 6px #666;
  cursor: pointer;
  transition: all .3s;
}

以上代码实现了一个图片悬停变色（background-color）和悬停播放按钮（.play）的效果。播放按钮通过设置为绝对定位，再通过margin负值居中定位，由于display值为none，所以一开始不可见，当鼠标移入item时通过:hover效果和display:block实现按钮的显示。

七、CSS瀑布流布局代码

以上我们已经讲解了瀑布流布局的实现方式，并提供了代码示例。下面再次放一份常用的CSS瀑布流布局代码：

.container {
  width: 1000px;
  margin: 0 auto;
}

.column {
  width: 30%;
  margin-right: 3%;
  float: left;
}

.item {
  width: 100%;
  background-color: #f5f5f5;
  margin-bottom: 20px;
  padding: 20px;
}

八、CSS瀑布流加载图片

CSS瀑布流设计最大的问题就是图片的加载。当页面中存在大量图片需要加载时，容易造成页面加载缓慢，影响用户体验。这时我们可以通过图片懒加载来解决这个问题。示例代码如下：

.item {
  opacity: 0;
  transition: all 1s ease;
}

.item.loaded {
  opacity: 1;
}

以上代码使用opacity属性将图片默认设置为透明，并通过CSS过渡效果使得图片加载时有一个渐变的过程。懒加载的核心是通过JavaScript控制jQuery库的插件的调用，可以参考jQuery.Lazy。

九、CSS瀑布流布局flex

除了使用float布局外，我们还可以引入flex布局实现瀑布流的效果。

.container {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1;
  margin-right: 3%;
  margin-bottom: 20px;
}

.item {
  width: 100%;
  background-color: #f5f5f5;
  padding: 20px;
  box-sizing: border-box;
}

以上代码使用CSS3的flex布局实现瀑布流布局，通过设置display: flex和flex-wrap: wrap实现自动换行，实现自适应布局，同时通过设置flex-grow: 1实现列块元素（column）的自适应宽度。

十、JS瀑布流效果代码

除了CSS3，我们还可以使用JavaScript实现瀑布流的效果。使用方便且效果较好的JavaScript插件是Masonry和Isotope。示例代码如下：

var container = document.querySelector('.container');
var masonry = new Masonry( container, {
  itemSelector: '.item',
  columnWidth: '.column'
});

以上代码使用JavaScript调用Masonry插件实现瀑布流布局，在初始化时通过设置itemSelector和columnWidth属性来控制元素的选择器和列宽，使得瀑布流布局的实现更加便捷。