dede 瀑布流代码多少(超级实用！打造炫酷瀑布流必备dede代码分享)

摘要：瀑布流是网站设计时经常会运用的一种效果，现在我们将分享超级实用的dede代码，帮助你打造炫酷的瀑布流效果。通过本文，你将深入了解如何使用dede代码来打造专业的瀑布流效果，为你的网站增加视觉冲击力和用户体验。

一、背景介绍

如今，随着移动互联网的发展和增长，人们越来越重视网站的用户体验，瀑布流效果也越来越流行。瀑布流效果又叫瀑布流布局，是指类似瀑布倾泻而下的瀑布感觉。瀑布流的设计布局可以让网站内容呈现出流动性，增加网站的设计感，并且因为框架不停的新生，所以会有新的内容不断的展现。因此，在网站的设计中，实现瀑布流效果是非常重要的。

二、dede代码简介

dede是国内一个比较流行的CMS(Content Management System)，集建站、设计、内容发布、维护于一体，具有高度的可扩展性，这里我们将重点介绍dede代码应用于瀑布流效果设计中。

三、使用dede代码打造炫酷瀑布流

1. 实现瀑布流效果的原理

瀑布流的实现原理是通过CSS3中的column-count属性实现了自动布局。简单的说，就是将一组由很多元素构成的数据，按照一定的规则进行排版的一种效果。dede代码的布局不同于传统网格布局和块级元素布局，其采用单个或多个区块儿的方式进行布局。这种布局基于绝对定位的方式，在每一个新插入的大块的顶部，定位到上一个元素的下面，实现了瀑布流效果。

2. dede代码案例1：基本的瀑布流

下面，我们将演示dede代码的基本瀑布流效果。在HTML页面中添加如下代码：

{dede:arclist channel=1 row=10 orderby=pubdate}
<a href="[field:arcurl /]" class="news-item" target="_blank">
  <img src="[field:litpic /]" alt="[field:title /]" />  <h3 class="item-title">[field:title /]</h3>  <p class="item-summary">[field:description /]</p>
</a>
{/dede:arclist}

其中，<a>是需要展示的内容，<img>代表一张缩略图，<h3>为文章标题，<P>为文章简述。dede代码解析执行之后，内容将自动排列成以下效果：

3. dede代码案例2：添加悬浮效果

我们可以利用CSS效果为瀑布流增加悬浮效果，提升用户体验。在HTML页面中添加如下代码：

<style type="text/css">
.news-item {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-bottom: 20px;
  margin-right: 20px;
  vertical-align: top;
.news-item:hover .hover-layer {
  display: block;
  transition: all ease .3s;
.hover-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  display: none;
  text-align: center;
  color: #fff;
.hover-layer:after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
.news-item:hover .img-glass {
  transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  z-index: 1;
  transition: all ease .3s;
.img-glass {
  width: 100%;
  height: 100%;
  background: url('imgs/icon-glass-big.png') 50%/100% 100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
</style>
{dede:arclist channel=1 row=10 orderby=pubdate}
<a href="[field:arcurl /]" class="news-item" target="_blank">
  <img src="[field:litpic /]" alt="[field:title /]" />  <h3 class="item-title">[field:title /]</h3>  <p class="item-summary">[field:description /]</p>
  <div class="hover-layer">
    <div class="img-glass"></div>
  </div>
</a>
{/dede:arclist}

经过以上代码添加后，瀑布流具有如下效果：

4. dede代码案例3:添加过渡效果

我们还可以为瀑布流添加过渡效果，提高瀑布流动效性，使得用户有更好的体验。在HTML页面中添加如下代码：

<style type="text/css">
.news-list {
  display: flex;
  flex-wrap: wrap;
  transition: all ease .2s;
.news-item {
  flex: 1;
  margin-right: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15);
  transition: all ease .2s;
.news-item:hove {
  transform: translateY(-10px);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
a {
  text-decoration: none;
  color: #000;
</style>
{dede:arclist channel=1 row=10 orderby=pubdate}
  <a href="[field:arcurl /]">
    <div class="news-item">
      <div class="item-img"><img src="[field:litpic /]" alt="[field:title /]" /></div>      <h3 class="item-title">[field:title /]</h3>      <p class="item-summary">[field:description /]</p>
    </div>
  </a>
{/dede:arclist}
<script>
$(function() {
  var $newsList = $('.news-list');
  $newsList.imagesLoaded(function() {
    $newsList.masonry({
      itemSelector: '.news-item',
      gutter: 20,
      transitionDuration: '0.2s'
    });
  });
});
</script>