当前位置:   article > 正文

uniapp实现瀑布流

uniapp实现瀑布流
  1. <template>
  2. <view class="container">
  3. <view class="left" ref="leftColumn">
  4. <view class="posive" v-for="(item, index) in leftList" :key="index">
  5. <image :src="item.src" alt="" mode="widthFix" @click="previewImg(item)" />
  6. </view>
  7. </view>
  8. <view class="right" ref="rightColumn">
  9. <view class="posive" v-for="(item, index) in rightList" :key="index">
  10. <image :src="item.src" alt="" mode="widthFix" @click="previewImg(item)" />
  11. </view>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. // 图片列表
  20. list: [{
  21. src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
  22. },
  23. {
  24. src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
  25. },
  26. {
  27. src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
  28. },
  29. {
  30. src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
  31. },
  32. {
  33. src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
  34. },
  35. {
  36. src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
  37. },
  38. {
  39. src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
  40. },
  41. {
  42. src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
  43. },
  44. {
  45. src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
  46. },
  47. {
  48. src: "https://inews.gtimg.com/om_bt/OjPq2cnMN_-ivDKjxpCZ2kk_ab8YC5VMnL-0pQ21fUvd4AA/1000"
  49. },
  50. // 添加更多图片对象
  51. ],
  52. // 初始化左右盒子
  53. leftList: [],
  54. rightList: [],
  55. // 初始化左右盒子高度
  56. leftH: 0,
  57. rightH: 0
  58. };
  59. },
  60. onLoad() {
  61. this.doList();
  62. },
  63. methods: {
  64. doList() {
  65. const that = this;
  66. this.list.forEach(res => {
  67. uni.getImageInfo({
  68. src: res.src,
  69. success: image => {
  70. let showH = (50 * image.height) / image.width;
  71. if (that.leftH <= that.rightH) {
  72. that.leftList.push({
  73. ...res,
  74. height: showH
  75. });
  76. that.leftH += showH;
  77. } else {
  78. that.rightList.push({
  79. ...res,
  80. height: showH
  81. });
  82. that.rightH += showH;
  83. }
  84. }
  85. });
  86. });
  87. }
  88. }
  89. };
  90. </script>
  91. <style>
  92. .container {
  93. padding: 0 24rpx;
  94. font-size: 14rpx;
  95. line-height: 24rpx;
  96. display: flex;
  97. justify-content: space-between;
  98. .right,
  99. .left {
  100. display: inline-block;
  101. width: 340rpx;
  102. vertical-align: top;
  103. }
  104. .left image,
  105. .right image {
  106. border-radius: 16rpx;
  107. width: 100%;
  108. margin-bottom: 24rpx;
  109. }
  110. }
  111. </style>

效果

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/274051
推荐阅读
相关标签
  

闽ICP备14008679号