vue封装瀑布流组件

高山仰止、景行行止

已于 2023-05-05 17:45:13 修改

阅读量302

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-05-05 17:43:56 首次发布

本文链接：https://blog.csdn.net/weixin_56527169/article/details/130511340

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<template>
  <div>
    <div class="box">
      <div v-for="(item, index) in dataMenus" :key="index" class="boxItem">
        <img :src="item.path" />
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  props: {
    dataMenus: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.waterFall();
  },
  methods: {
    waterFall() {
      var pageWidth = document.querySelector(".box").clientWidth; //页面宽度
      var items = document.getElementsByClassName("boxItem"); //获取有多少图片片
      var gap = 5; //图片与图片之间的间隙(设置为0的话，会导致底部图片挤压)
      // 1.确定1行有多少列  1)获取到页面的宽度 2)获取到每个图片的宽度 3)需要显示的列数=页面宽度/（图片宽度+图片之间的间隔）
      // 显示的列数(column)=页面宽度(pageWidth)/(盒子宽度(itemWidth)+间隙(gap))

      var itemWidth = items[0].clientWidth; //获取每张图片的宽度
      var columns = parseInt(pageWidth / (itemWidth + gap)); //获取列数 = 页面宽度/(图片宽度+图片之间的间隔)
      // console.log('pageWidth', pageWidth, itemWidth, columns)
      // 定义一个数组arr来保存高度
      var arr = [];
      for (let i = 0; i < items.length; i++) {
        // 排列第一行
        if (i < columns) {
          // 满足条件则在第一行
          items[i].style.top = 0;
          items[i].style.left = (itemWidth + gap) * i + "px";
          arr.push(items[i].offsetHeight);
        } else {
          // 排列第二行
          var minHeight = arr[0];
          var index = 0;
          // 找最小高度
          for (var j = 0; j < arr.length; j++) {
            if (minHeight > arr[j]) {
              minHeight = arr[j];
              index = j;
            }
          }
          // 设置下一行的第一个盒子的位置
          items[i].style.top = arr[index] + gap + "px";
          items[i].style.left = items[index].offsetLeft + "px";
          arr[index] = arr[index] + items[i].offsetHeight + gap;
        }
      }
    },
  },
};
</script>
  
  <style lang="less" scoped>
.box {
  height: calc(100vh - 30px);
  overflow-y: scroll;
  position: relative;
  width: 100%;
  .boxItem {
    width: 100px;
    padding: 5px 5px;
    position: absolute;
    img {
      width: 100%;
    }
  }
}
</style>

1.通过获取屏幕宽度来计算出瀑布流所需要的列数

2.第一列之下的图片通过获取最小高度来填充

<template>
    <div>
      <watter-fall :data-menus="applicationlist"></watter-fall>
      <nav-bar></nav-bar>
    </div>
  </template>

<script>
import navBar from '@/components/NavBar';
import watterFall from '@/components/WatterFall';

export default {
  components: { navBar,watterFall },
    name:'shop',
    props: {
    data: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      index: 0,
      applicationlist:[
        {path:'https://img1.baidu.com/it/u=952600201,3461173534&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=c18a23a50c9d4c21aa52da808837f9c5'},
        {path:'https://img2.baidu.com/it/u=2376350185,9700368&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=aa1acc24e4eda8fbb0400c6605a5581a'},
        {path:'https://img2.baidu.com/it/u=3877894948,2050135903&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=cfbd3e6dcdca4d8509068d92fda94f83'},
        {path:'https://img2.baidu.com/it/u=605054797,2327142606&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=caa58210f19e2190de30ead0aae6d31c'},
        {path:'https://img1.baidu.com/it/u=4137997603,1259881509&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=71021269707a0211b00eb20943e85bdc'},
        {path:'https://img0.baidu.com/it/u=985235917,3927982578&fm=253&fmt=auto?w=130&h=170'},
        {path:'https://img1.baidu.com/it/u=1773922313,1020703787&fm=253&fmt=auto?w=130&h=170'},
        {path:'https://img1.baidu.com/it/u=3297175625,3468494859&fm=253&fmt=auto&app=138&f=JPEG?w=688&h=431'},
        {path:'https://img1.baidu.com/it/u=1697591426,439251294&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=640'},
        {path:'https://img1.baidu.com/it/u=952600201,3461173534&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=c18a23a50c9d4c21aa52da808837f9c5'},
        {path:'https://img2.baidu.com/it/u=2376350185,9700368&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=aa1acc24e4eda8fbb0400c6605a5581a'},
        {path:'https://img2.baidu.com/it/u=3877894948,2050135903&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=cfbd3e6dcdca4d8509068d92fda94f83'},
        {path:'https://img2.baidu.com/it/u=605054797,2327142606&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=caa58210f19e2190de30ead0aae6d31c'},
        {path:'https://img1.baidu.com/it/u=4137997603,1259881509&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683392400&t=71021269707a0211b00eb20943e85bdc'},
        {path:'https://img0.baidu.com/it/u=985235917,3927982578&fm=253&fmt=auto?w=130&h=170'},
        {path:'https://img2.baidu.com/it/u=2374217666,1840353380&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350'},
        {path:'https://img0.baidu.com/it/u=3213897541,1787721034&fm=253&fmt=auto&app=138&f=JPEG?w=641&h=481'},
        {path:'https://img2.baidu.com/it/u=2269588034,2603289550&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=888'},
        {path:'https://img0.baidu.com/it/u=103311479,2172107226&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200'},
      ],
    };
  },

}
</script>

3.调用组件，使用数据渲染

4.最后效果如下，图片加载需配合懒加载一起使用：