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

鉴于大家可以直接打开运行见效果,我把组件放入页面中,去除一些需要编译的,比如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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值