网站建设资讯

NEWS

网站建设资讯

vue怎么实现瀑布流布局-创新互联

这篇“vue怎么实现瀑布流布局”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“vue怎么实现瀑布流布局”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。

陆河网站建设公司创新互联建站,陆河网站设计制作,有大型网站制作公司丰富经验。已为陆河数千家提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱,请找那个售后服务好的陆河做网站的公司定做!

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。

vue中的瀑布流布局组件需求:图片容器宽度固定,高度根据图片自适应,图片一行不能排列时候,换行依次从左往右排列。另外结合vue-lazy实现懒加载(npmivue-lazyload--save-dev)使用也很简单,在需要懒加载的img标签上将:src换成v-lazy。

瀑布流插件父组件传递数据:

waterfallData:[
  {
  e_img:"test.jpg",
  //图片
  e_intro:"描述信息",
  u_img:"test.jpeg",
  //标记图
  u_name:"开发者"},
  {
  e_img:"test.jpg",
  e_intro:"描述信息",
  u_img:"test.jpeg",
  u_name:"开发者"}
  ]
  定宽不定高瀑布流布局子组件插件