vue2实现【瀑布流布局】

瀑布流

    • 1. 解释
    • 2. 形成结构和样式
    • 3. 自定义指令

1. 解释

vue2实现【瀑布流布局】_第1张图片

  • 瀑布流特征:
  1. 等宽不等高:元素宽度固定,高度根据内容自适应。
  2. 错落排列:元素像瀑布一样从上到下依次填充,自动寻找最短列插入

体现:图中第一排1,2,3元素中,3是最短高度,就是该行最短列。

2. 形成结构和样式

<template>
  <div class="page-main">
    <div class="card">
      
      <div v-waterfall="el => updateLayout(el)" class="card-item" v-for="item in cardDate" :key="item.id"
        :style="{ background: item.color, height: item.height }">
        <p class="text">{{ item.id }}p>
      div>
    div>
  div>
template>
//这是
                    
                    

你可能感兴趣的:(前端,css)