vue实现瀑布流

我们知道瀑布流是等宽不等高的,下边我们使用两种方式实现瀑布流

css3的column布局 column-count: column-gap

  • template
  
  • javacript

  • css
 


效果图如下,我们发现这个图片第一张第二张都是竖着排列的,不是我们想要的结果

image.png

第二种使用grid布局

  • template
  
  • javacript

  • css
 


效果图如下,很显然这种等宽和同行等高的不是我们想要的瀑布流,优点类似于flex布局了

image.png

第三种使用js动态生成

  • template
  
  • javacript

  • css
 



效果图如下,很明显这个才是我们想要的结果

image.png

第四种 flex布局实现瀑布流







你可能感兴趣的:(vue实现瀑布流)