瀑布流组件，vue的瀑布流组件，木桶布局组件barrel（全屏+resize）,另有jq版本的木桶布局

最新推荐文章于 2024-06-06 14:25:46 发布

置顶

lelehouse

最新推荐文章于 2024-06-06 14:25:46 发布

阅读量593

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44329718/article/details/89477190

版权

鉴于大家可以直接打开运行见效果，我把组件放入页面中，去除一些需要编译的，比如router-link,实际使用，大家可以自行替换，另外鉴于视觉中国的黑洞事件，模拟的图片，大家自己本地放图吧。

需要注意几个点，resize事件只能用一次，建议大家在app中使用，可以vuex共享数据。
如果问题，请指教，另觉得最后一行处理的不是很好，希望有更好的方案指教！

 <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.2/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui@2.4.2/lib/index.js"></script>
  <style>
    .clearfix:before,
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }

    .clearfix {
      zoom: 1;
    }

    .row {
      margin-top: 20px;
    }

    a {
      text-align: center;
    }

    .img-box {
      margin-left: 20px;
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      float: left;
    }

    .img-box>img {
      display: block;
      transition: all 0.5s;
      border-radius: 8px;
    }

    .img-box:hover {
      transform: scale(1.08);
    }

    .img-box:hover>img {
      transform: scale(1.08);
    }

    /*

最低0.47元/天解锁文章

lelehouse

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流组件，vue的瀑布流组件，木桶布局组件barrel（全屏+resize）,另有jq版本的木桶布局

鉴于大家可以直接打开运行见效果，我把组件放入页面中，去除一些需要编译的，比如router-link,实际使用，大家可以自行替换，另外鉴于视觉中国的黑洞事件，模拟的图片，大家自己本地放图吧。需要注意几个点，resize事件只能用一次，建议大家在app中使用，可以vuex共享数据。如果问题，请指教，另觉得最后一行处理的不是很好，希望有更好的方案指教！ <!DOCTYPE html>...
复制链接

扫一扫

专栏目录