瀑布流布局

已于 2022-08-08 11:49:22 修改
阅读量956 收藏 4
点赞数 3
文章标签： 前端 javascript html vue
于 2022-07-08 11:09:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45828551/article/details/125671535
版权

最近浏览到一个网站，[FILMGRAB]，然后仿照这个网站写了个瀑布流的demo，需要类似功能的可以参考一下。

瀑布流又称瀑布流式布局，是比较流行的一种网页布局方式，每张图片的宽度都设置为一样的，但是高度是根据内容变化的，实现一个不规则的排列。

当然实现瀑布流布局的方式有很多，有不好的地方，欢迎大家来评论区指导。

实现思路

1、根据视图区域的宽度判断需要几列

2、将图片插入到每一列并记录每一列图片的位置(top)，成为每一列的首个元素

3、此时每一列都有数据，找到高度最小的一列，记录当前索引，然后插入数据，重复此操作直至所有数据都插入进去。

直接上代码

首先准备一些图片，我直接找到一些图片链接，简单处理下格式

const imgArr = [
      "https://film-grab.com/wp-content/uploads/2022/07/The-Adjuster-006.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Live-and-Let-Die-061.jpg",
      "https://film-grab.com/wp-content/uploads/2022/07/After-Yang026.jpg",
      "https://film-grab.com/wp-content/uploads/2022/07/The-Worst-Person-in-the-World-001.jpg",
      "https://film-grab.com/wp-content/uploads/2020/10/Zeroville-025.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Bigger-Than-Life-029.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Diamonds-are-Forever-060.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Prisoners-of-Ghostland-002.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Dune-2021-022.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Celeste-005.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/On-Her-Majestys-Secret-Service-023.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/NightmareAlley010.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/Paris-13th010.jpg",
      "https://film-grab.com/wp-content/uploads/2020/10/Taking-Off-019.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/The-Eyes-of-Tammy-Faye-001.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/CmonCmon019.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Frighteners-021.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/You-Only-Live-Twice-003.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/In-Which-We-Serve-008.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/Apollo101_2036.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/InTheEarth035.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/3Iron042.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/Femme-Fatale049.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Thunderball-005.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/The-Card-Counter-032.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/The-Apartment003.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Goldfinger-015.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/His-House-047.jpg",
      "https://film-grab.com/wp-content/uploads/2021/09/Der-Prozess-004.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Dillinger-is-Dead-028.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Domain-007.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/From-Russia-With-Love-002.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Master-Z-052.jpg",
      "https://film-grab.com/wp-content/uploads/2019/10/Friday-the-13th-Part-5-056.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Universal-Soldier-The-Return-003.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/Intrusion016.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/The-Canterbury-Tales-016.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Universal-Soldier-008.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Ip-Man-4-047.jpg",
      "https://film-grab.com/wp-content/uploads/2021/10/Shadow-Film-01.jpg",
      "https://film-grab.com/wp-content/uploads/2021/10/Les-Chants-de-Maldoror-011.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Desert-Hearts-024.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Straight-Time-005.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Ip-Man-3-006.jpg",
      "https://film-grab.com/wp-content/uploads/2021/09/Emperor-Tomato-Ketchup-020.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Black-Widow-009.jpg",
      "https://film-grab.com/wp-content/uploads/2020/10/Border-006.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Green-Inferno-029.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/The-Damned-013.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Ip-Man-2-054.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Passing-001.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Master-of-the-House-003.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Outside-Satan-003.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Black-Orpheus-043.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Ip-Man-001.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Last-Night-In-Soho-023.jpg",
      "https://film-grab.com/wp-content/uploads/2021/09/Explorers-039.jpg",
      "https://film-grab.com/wp-content/uploads/2021/10/Me-and-Earl-028.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Annette-014.jpg",
      "https://film-grab.com/wp-content/uploads/2021/10/The-Rubber-05.jpg",
      "https://film-grab.com/wp-content/uploads/2021/10/Hana-Bi-046.jpg"
    ].map((el) => {
      return {
        src: el,
        name: el.substring(49)
      };
    });

然后预加载把图片的高度保存下来

picLoad() {
  return new Promise((resolve) => {
    this.imgArr.forEach((item) => {
      if (!item.src) {
        this.loadedCount++;
        item["_height"] = 0;
        if (this.loadedCount == this.imgArr.length) {
          resolve();
        }
      } else {
        let img = new Image();
        img.src = item.src;
        img.onload = () => {
          this.loadedCount++;
          // 预加载图片的高 / 预加载图片的宽 === 实际渲染图片的高 / 实际渲染图片的宽。
          // 我们知道实际渲染图片的宽，所以可以用 -- 实际宽 * (预加载高 / 预加载宽) -- 这个公式得出实际渲染图片的高。
          item["_height"] = Math.round(this.imgItemWidth * (img.height / img.width));
          if (this.loadedCount == this.imgArr.length) {
            resolve();
          }
        };
        img.onerror = () => {
          this.loadedCount++;
          item["_height"] = 0;
          if (this.loadedCount == this.imgArr.length) {
            resolve();
          }
        };
      }
    });
  });
},

以上操作实际项目中可以交给后台处理，不管什么方式，最后拿到图片资源的高度就行。

根据视图区域的宽度判断需要几列。

let clientWidth = this.$refs.container.clientWidth, // 页面视图容器宽度
    // 列数 = 容器宽度 / (图片宽度 + 间隙)
  cols = Math.floor(clientWidth / (this.imgItemWidth + this.gap)); // 显示列数

将图片插入到每一列并记录每一列图片的位置(top)

  let columns = []; // 存放每一列的数据
  // 初始每列首行元素
  for (let i = 0; i < cols; i++) {
    this.imgArr[i]["_top"] = 0;
    columns.push({ picList: [this.imgArr[i]] });
  }

 此时每一列都有数据，找到高度最小的一列，记录当前索引，然后插入数据，重复此操作直至所有数据都插入进去。

// 处理剩余元素
  for (let i = cols; i < this.imgArr[i].length; i++) {
    // 找到每列最小高度和最小高度的索引
    let minHeight = this.getMin(columns);
    // 最小高度就是下个图片的top
    this.imgArr[i]["_top"] = minHeight.height;
    // 插入数据
    columns[minHeight.index]["picList"].push(this.imgArr[i]);
  }

getMin方法

getMin(columns) {
  let index = 0,
    min = columns.reduce((prev, cur, i) => {
      let _cur = cur.picList[cur.picList.length - 1],
        h = parseInt(_cur._top) + parseInt(_cur._height);
      if (prev == 0) {
        return h;
      } else if (h < prev) {
        index = i;
        return h;
      } else {
        return prev;
      }
    }, 0);
  return { height: min, index };
}

瀑布流使用flex布局，然后加上一些css过渡属性

<div class="container" ref="container">
  <div class="col" v-for="(col, index) in columns" :key="index">
    <div
      ref="pic"
      class="pic"
      v-for="item in col.picList"
      :key="item.name"
      :style="{ width: `${imgItemWidth}px`, height: `${item._height}px` }"
    >
      <img :src="item.src" style="width: 100%" />
      <div class="pic-mask" :style="{ height: `${item._height}px` }">
        <div class="pic-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</div>
<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 0 30px 20px;
  .pic {
    overflow: hidden;
    border-radius: 10px;
    margin-top: 20px;
    transition: all 0.6s;
    &-mask {
      width: 100%;
      background-color: rgba(0, 0, 0, 0);
      transition: background-color 4s;
      transform: translateY(-100%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      .pic-name {
        height: 30px;
        text-align: center;
        font-weight: bold;
        color: transparent;
        transform: translateY(30px);
        transition: all 1s;
      }
    }
    &-mask:hover {
      background-color: rgba(0, 0, 0, 0.4);
      transition: background-color 4s linear 0.5s;
      .pic-name {
        color: #fff;
        transform: translateY(0px);
        transition: all 1s;
      }
    }
  }
  .pic:hover {
    transform: translateY(-10px);
    transition: all 0.6s;
  }
}
</style>

就完成了。

完整代码

<template>
  <div class="container" ref="container">
    <div class="col" v-for="(col, index) in columns" :key="index">
      <div
        ref="pic"
        class="pic"
        v-for="item in col.picList"
        :key="item.name"
        :style="{ width: `${imgItemWidth}px`, height: `${item._height}px` }"
      >
        <img :src="item.src" style="width: 100%" />
        <div class="pic-mask" :style="{ height: `${item._height}px` }">
          <div class="pic-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "waterfall",
  data() {
    const imgArr = [
      "https://film-grab.com/wp-content/uploads/2022/07/The-Adjuster-006.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Live-and-Let-Die-061.jpg",
      "https://film-grab.com/wp-content/uploads/2022/07/After-Yang026.jpg",
      "https://film-grab.com/wp-content/uploads/2022/07/The-Worst-Person-in-the-World-001.jpg",
      "https://film-grab.com/wp-content/uploads/2020/10/Zeroville-025.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Bigger-Than-Life-029.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Diamonds-are-Forever-060.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Prisoners-of-Ghostland-002.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Dune-2021-022.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Celeste-005.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/On-Her-Majestys-Secret-Service-023.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/NightmareAlley010.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/Paris-13th010.jpg",
      "https://film-grab.com/wp-content/uploads/2020/10/Taking-Off-019.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/The-Eyes-of-Tammy-Faye-001.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/CmonCmon019.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Frighteners-021.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/You-Only-Live-Twice-003.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/In-Which-We-Serve-008.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/Apollo101_2036.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/InTheEarth035.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/3Iron042.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/Femme-Fatale049.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Thunderball-005.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/The-Card-Counter-032.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/The-Apartment003.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Goldfinger-015.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/His-House-047.jpg",
      "https://film-grab.com/wp-content/uploads/2021/09/Der-Prozess-004.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Dillinger-is-Dead-028.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Domain-007.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/From-Russia-With-Love-002.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Master-Z-052.jpg",
      "https://film-grab.com/wp-content/uploads/2019/10/Friday-the-13th-Part-5-056.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Universal-Soldier-The-Return-003.jpg",
      "https://film-grab.com/wp-content/uploads/2022/05/Intrusion016.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/The-Canterbury-Tales-016.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Universal-Soldier-008.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Ip-Man-4-047.jpg",
      "https://film-grab.com/wp-content/uploads/2021/10/Shadow-Film-01.jpg",
      "https://film-grab.com/wp-content/uploads/2021/10/Les-Chants-de-Maldoror-011.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Desert-Hearts-024.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Straight-Time-005.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Ip-Man-3-006.jpg",
      "https://film-grab.com/wp-content/uploads/2021/09/Emperor-Tomato-Ketchup-020.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Black-Widow-009.jpg",
      "https://film-grab.com/wp-content/uploads/2020/10/Border-006.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/Green-Inferno-029.jpg",
      "https://film-grab.com/wp-content/uploads/2022/02/The-Damned-013.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Ip-Man-2-054.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Passing-001.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Master-of-the-House-003.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Outside-Satan-003.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Black-Orpheus-043.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Ip-Man-001.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Last-Night-In-Soho-023.jpg",
      "https://film-grab.com/wp-content/uploads/2021/09/Explorers-039.jpg",
      "https://film-grab.com/wp-content/uploads/2021/10/Me-and-Earl-028.jpg",
      "https://film-grab.com/wp-content/uploads/2022/04/Annette-014.jpg",
      "https://film-grab.com/wp-content/uploads/2021/10/The-Rubber-05.jpg",
      "https://film-grab.com/wp-content/uploads/2021/10/Hana-Bi-046.jpg"
    ].map((el) => {
      return {
        src: el,
        name: el.substring(49)
      };
    });
    return {
      imgArr,
      columns: [],
      loadedCount: 0,
      imgItemWidth: 360, // 图片宽度
      gap: 20, // 间隙
      times: null
    };
  },
  async mounted() {
    await this.picLoad();
    this.initData();
    window.onresize = () => {
      if (this.times) {
        clearTimeout(this.times);
      }
      this.times = setTimeout(() => {
        this.initData();
      }, 500);
    };
  },
  methods: {
    picLoad() {
      return new Promise((resolve) => {
        this.imgArr.forEach((item) => {
          if (!item.src) {
            this.loadedCount++;
            item["_height"] = 0;
            if (this.loadedCount == this.imgArr.length) {
              resolve();
            }
          } else {
            let img = new Image();
            img.src = item.src;
            img.onload = () => {
              this.loadedCount++;
              item["_height"] = Math.round(this.imgItemWidth * (img.height / img.width));
              if (this.loadedCount == this.imgArr.length) {
                resolve();
              }
            };
            img.onerror = () => {
              this.loadedCount++;
              item["_height"] = 0;
              if (this.loadedCount == this.imgArr.length) {
                resolve();
              }
            };
          }
        });
      });
    },
    initData() {
      let clientWidth = this.$refs.container.clientWidth, // 页面视图容器宽度
        cols = Math.floor(clientWidth / (this.imgItemWidth + this.gap)), // 计算显示列数
        columns = [];
      // 初始每列首行元素
      for (let i = 0; i < cols; i++) {
        this.imgArr[i]["_top"] = 0;
        columns.push({ picList: [this.imgArr[i]] });
      }
      // 处理剩余元素
      for (let i = cols; i < this.imgArr.length; i++) {
        let minHeight = this.getMin(columns);
        this.imgArr[i]["_top"] = minHeight.height;
        columns[minHeight.index]["picList"].push(this.imgArr[i]);
      }
      this.columns = columns;
    },
    getMin(columns) {
      let index = 0,
        min = columns.reduce((prev, cur, i) => {
          let _cur = cur.picList[cur.picList.length - 1],
            h = parseInt(_cur._top) + parseInt(_cur._height);
          if (prev == 0) {
            return h;
          } else if (h < prev) {
            index = i;
            return h;
          } else {
            return prev;
          }
        }, 0);
      return { height: min, index };
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 0 30px 20px;
  .pic {
    overflow: hidden;
    border-radius: 10px;
    margin-top: 20px;
    transition: all 0.6s;
    &-mask {
      width: 100%;
      background-color: rgba(0, 0, 0, 0);
      transition: background-color 4s;
      transform: translateY(-100%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      .pic-name {
        height: 30px;
        text-align: center;
        font-weight: bold;
        color: transparent;
        transform: translateY(30px);
        transition: all 1s;
      }
    }
    &-mask:hover {
      background-color: rgba(0, 0, 0, 0.4);
      transition: background-color 4s linear 0.5s;
      .pic-name {
        color: #fff;
        transform: translateY(0px);
        transition: all 1s;
      }
    }
  }
  .pic:hover {
    transform: translateY(-10px);
    transition: all 0.6s;
  }
}
</style>

海盗船长。
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
瀑布流式页面布局源码
05-07
瀑布流式布局 前端 ui 瀑布流式页面布局源码 国外瀑布流网页布局jQuery代码 前端布局学习
实现瀑布流布局的四种方法
Smile_666666的博客
05-13 2万+
一、 什么是瀑布流布局 1、是什么 页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面 2、特点 固定宽度，高度不一 岑参不齐的布局 以图片为主 二、有什么优缺点 1、优点 节省空间：降低页面的复杂 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，
CSS总结——瀑布流布局
热门推荐
qq_53008257的博客
05-07 3万+
瀑布流布局 瀑布流布局是一种新型的布局方式，可以将大小不一的图片完整的显示在页面上，并且在杂乱的布局中保持着一定的美感，今天学习了一下如何使用瀑布流布局，总结了有以下三种方式。（瀑布流还可以使用grid布局实现，还没有学习过这种方式） 瀑布流的实现方法可以用纯CSS，也可以用JS实现，如何选取决于需求,这几种方法各有优略，如何选取取决于需求。以下案例均采用如下的html代码 <div class="container" id="con"> <div class="item
瀑布流布局原理及应用场景
似水流年QC的博客
05-16 8426
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 一. 瀑布流布局的原理？ 瀑布流布局的特点是等宽不等高。为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。 瀑布流布局如下图所示： 二、 应用瀑布流布局的好处？ 1、因为瀑布流有吸引力，瀑布流会在它的页面
前端瀑布流布局
congCong的博客
07-28 1099
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。
三种方式实现瀑布流布局
10-20
本文主要介绍了分别使用javascript，jquery，css实现瀑布流布局的方法。具有很好的参考价值，下面跟着小编一起来看下吧
微信小程序源码 瀑布流布局(学习版)
06-18
微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)...
vue实现简单瀑布流布局
10-15
主要为大家详细介绍了vue实现简单瀑布流布局，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
瀑布流布局 WaterfallLayout
05-22
瀑布流布局，http://blog.csdn.net/qq_18983205/article/details/72630547对应的代码
什么是瀑布流布局？怎么实现？
zhong_333的博客
10-25 365
瀑布流又称瀑布流式布局，是一种多列等宽不等高的一种页面布局方式。视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动，这种布局会不断加载数据并附加至当前的尾部。是一种多列等宽不等高的一种页面布局方式，用于图片比较复杂，图片尺寸比较复杂时可以使用的一种展示方式，这种展示方式可以使页面比较美观，让人有种错落有致的感觉。瀑布流是一种允许用户不断往下滑动，页面自动刷新呈现内容的交互形式。瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。
浅析瀑布流布局原理及实现方式
qq_47443027的博客
08-29 2万+
一、瀑布流 　　瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了，我最早知道这个名词的时候大约是在2012年，当时Pinterest网站的布局就是使用的这种流式布局，简言之像Pinterest网站这样的布局就称之为瀑布流布局，也有人称之为Pinterest 布局。 　　瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 　　瀑
vue瀑布流布局
weixin_49295874的博客
05-25 1707
'瀑布流’是前端的一种’布局’方式，就像我们经常’搜百度’看到的’图片列表’都是’瀑布流’完成的，如下图，‘瀑布流’会根据’某一列’的’高度’，来自动向’最低高度’的一’列’下面继续添加元素，下面是在’vue’项目中使用’瀑布流’的案例。
详解瀑布流布局的5种实现方式及object-fit
weixin_44714325的博客
07-15 446
最近项目中需要处理与图片相关的布局，不得不说图片这玩意真想要得到完美的展示效果还真是要费些力气。因为图片的尺寸或者比例各不相同。所以想要不同尺寸的图片有好的显示效果，你就需要找到适合的方式。 而且图片往往是不可或缺元素。毕竟一图胜千言，有时候图片能给带来非常好的效果。 比如我们每天都会使用的表情包，它往往能够表达出我们无法用文字描述的信息，还比如我们经常在公众号里看到的漫画虽然短短几个字，但是却能够让我们看的不亦乐乎。 当然如果我们做图片网站的，那图片的处理就是绕不开的话题了。因对图片的处理经验不多，所以就
常见布局，瀑布流布局
m0_73860660的博客
11-28 199
百度图片类型的排版布局，
vue+uniapp瀑布流布局多种实现方式
pixle的博客
01-08 9455
瀑布流布局是网页设计常见的一种布局，一般用于图片多列展示。列宽固定，图片根据自身高度自适应交错排列。
瀑布流布局原理及详解
最新发布
dhp1994的博客
10-29 964
主要使用了 column-count 和 column-gap 属性，column-count 属性用来设置列数，column-gap 属性用来设置列于列之间的间距。第一种方式实现的是列数固定的布局，所以当列数可以任意指定时，上述方法就不再适用了，动态列数的 DOM 结构和样式和第一种方式是一样的，只有 js 代码略有不同。将大容器（父元素）的 display 设置为 flex，然后使用 flex-flow 属性，设置为：flex-flow: column wrap。页面的 DOM 元素。
前端如何实现瀑布流布局
吃饱打厨子
07-05 364
【代码】前端如何实现瀑布流布局。
flex瀑布流（响应式配置）
Sqddian的博客
02-21 1763
flex布局 瀑布流 响应式
一小时，学习掌握瀑布流页面布局
LIMI_伞梦的博客
12-29 7130
什么是瀑布流 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。其实瀑布流的特点就是参差不齐的排列方式，以及流式布局的扩展性，可以通过界面展示给用户多条数据，并且让用户可以有向下浏览的冲动。 博主在浏览各个网站总是看到这样的网页布局，它们的布局像瀑布流水一般，瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用
uniapp瀑布流布局
05-01
Uniapp是一款跨平台的开发框架，可以快速地构建出适用于多平台的应用程序。而瀑布流布局则是一种流行的前端布局方式，它可以让网页内容更加分散，从而增加美感和阅读性。 在Uniapp中使用瀑布流布局可以用原生的uni-list来实现。首先，需要设置uni-list中的样式，使其展示为瀑布流样式。可以给uni-list设置column-count的属性，使其变成多列布局。然后，还需要设置每个元素的宽度和高度，一般可以通过计算得出，也可以通过JS动态计算实现。在实现过程中，需要注意uni-list中的item为组件化的，需要用slot插槽来进行元素的填充。 除此之外，还可以使用一些插件来简化瀑布流布局的实现，例如waterfall.js、masonry.js等。这些插件都提供了方便快捷的API，可以很方便地实现瀑布流布局。 总的来说，Uniapp瀑布流布局的实现步骤相对简单，开发者只需要灵活运用uni-list组件及其他一些插件，就可以轻松实现一个漂亮的瀑布流布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值