ui使用 weui ，主要看js部分，样式只在外盒子上加

position: relative; width : 100%;

item元素添加绝对定位和固定宽度

width : calc((100% - 5px) / 2); position : absolute;

 <div class="weui-tab">
            <div class="weui-navbar">
                <div data-id="0" class="weui-navbar__item weui-bar__item_on">
                    合作酒店
                </div>
                <div data-id="1" class="weui-navbar__item">
                    公司团队
                </div>
                <div data-id="2" class="weui-navbar__item">
                    会员活动
                </div>
                <div data-id="3" class="weui-navbar__item">
                    加盟共赢
                </div>
            </div>
            <div class="weui-tab__panel">
                <!-- 合作酒店 -->
                <div>
                    <div class="store" id="store">
                        <div class="store-main"></div>
                    </div>
                </div>
                <div style="display:none">
                    <div class="masonry" id="team">
                        <ul class="masonry-list">
                            <li class="masonry-item">
                                <h4 class="masonry-item-tit">公司团队</h4>
                                <img src="img/store/kaiwei.jpg" alt="${j.name}">
                            </li>
                            <li class="masonry-item">
                                <h4 class="masonry-item-tit">公司团队</h4>
                                <img src="img/banner/home-swiper1.jpg" alt="${j.name}">
                            </li>
                            <li class="masonry-item">
                                <h4 class="masonry-item-tit">公司团队</h4>
                                <img src="img/banner/home-swiper1.jpg" alt="${j.name}">
                            </li>
                            <li class="masonry-item">
                                <h4 class="masonry-item-tit">公司团队</h4>
                                <img src="img/store/kaiwei.jpg" alt="${j.name}">
                            </li>
                        </ul>

                    </div>
                </div>
                <div style="display:none">
                    <div class="masonry" id="activity">
                        <ul class="masonry-list">
                            <li class="masonry-item">
                                <h4 class="masonry-item-tit">会员活动</h4>
                                <img src="img/store/kaiwei.jpg" alt="${j.name}">
                            </li>
                            <li class="masonry-item">
                                <h4 class="masonry-item-tit">会员活动</h4>
                                <img src="img/store/kaiwei.jpg" alt="${j.name}">
                            </li>
                            <li class="masonry-item">
                                <h4 class="masonry-item-tit">会员活动</h4>
                                <img src="img/banner/home-swiper1.jpg" alt="${j.name}">
                            </li>
                            <li class="masonry-item">
                                <h4 class="masonry-item-tit">会员活动</h4>
                                <img src="img/banner/home-swiper1.jpg" alt="${j.name}">
                            </li>
                            <li class="masonry-item">
                                <h4 class="masonry-item-tit">会员活动</h4>
                                <img src="img/store/kaiwei.jpg" alt="${j.name}">
                            </li>
                        </ul>
                    </div>
                </div>
                <div style="display:none">
                    <div class="masonry" id="join">
                        <ul class="masonry-list">
                            <li class="masonry-item">
                                <h4 class="masonry-item-tit">加盟共赢</h4>
                                <img src="img/store/kaiwei.jpg" alt="${j.name}">
                            </li>
                            <li class="masonry-item">
                                <h4 class="masonry-item-tit">加盟共赢</h4>
                                <img src="img/store/kaiwei.jpg" alt="${j.name}">
                            </li>
                            <li class="masonry-item">
                                <h4 class="masonry-item-tit">加盟共赢</h4>
                                <img src="img/banner/home-swiper1.jpg" alt="${j.name}">
                            </li>
                            <li class="masonry-item">
                                <h4 class="masonry-item-tit">加盟共赢</h4>
                                <img src="img/banner/home-swiper1.jpg" alt="${j.name}">
                            </li>
                            <li class="masonry-item">
                                <h4 class="masonry-item-tit">加盟共赢</h4>
                                <img src="img/store/kaiwei.jpg" alt="${j.name}">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

// 获取酒店列表
$.getJSON("/mock/index/store.json", {}, res => {
  let html = '';
  for (const i of res) {
    html += `<h3>
                <span>${i.name}</span>
                <span>${i.enName}</span>
            </h3>`
    html += '<ul class="store-list">'
    for (const j of i.children) {
      html += ` <li class="store-item">
                    <h4 class="store-item-tit" data-parentId="${i.id}" data-id="${j.id}">${j.name}</h4>
                    <img data-parentId="${i.id}" data-id="${j.id}" src="${j.img}" alt="${j.name}">
                    <address data-parentId="${i.id}" data-id="${j.id}">${j.address}</address>
                    <em>${j.area}</em>
                </li>`
    }
    html += '</ul>'
  }
  $('#store .store-main').append(html)

  navBarChange()

})

// 切换navbar
function navBarChange () { 
  $('.weui-navbar__item').on('click', function (e) {
    const index = e.currentTarget.dataset.id
    $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
    $(`.weui-tab__panel > div:eq(${index})`).show()
    $(`.weui-tab__panel > div:eq(${index})`).siblings().hide()
    
     // 第一个选项卡不是瀑布流
    if(index !== 0){
        init(index)
    }
  });
 }

// 瀑布流
function init(index){
  let boxWidth=$(`.weui-tab__panel > div:eq(${index}) .masonry-item`).outerWidth(true);
  // 获取每个小盒子的宽度 包括margin、padding、border
  // let cols=parseInt($(window).width()/boxWidth);
  let cols = 2 // 如果是固定列
  // 获取列数
  let heightArr=[];
  for(let i=0;i<cols;i++){
      heightArr.push(0);
  };
  
  //遍历每一张图片
  $(`.weui-tab__panel > div:eq(${index}) .masonry-item`).each(function(index,item) {
      let idx=0;
      let minBoxHeight=heightArr[0];
      // 获取最小高度
      for(let i=0;i<heightArr.length;i++){
          if(heightArr[i]<minBoxHeight){
              minBoxHeight=heightArr[i];
              idx=i;
              // 获取最小高度的索引
          }
      };

      // 设置图片的样式
      $(item).css({
          left:boxWidth*idx,
          top:minBoxHeight
      });
      heightArr[idx]+=$(item).outerHeight(true);

  });

  // 获取最长高度
  let height = heightArr[0] > heightArr[1]?heightArr[0]:heightArr[1];
  // 设置外层容器高度
  $(`.weui-tab__panel > div:eq(${index}) .masonry-list`).css('height',height + 'px')
  heightArr=[];
};

// 瀑布流
.masonry {
    font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    padding-top: 10px;
    .masonry-list {
        position: relative;
        width   : 100%;
        overflow: auto;
        height: auto;

        .masonry-item {
            width                  : calc((100% - 5px) / 2);
            position               : absolute;
            margin                 : 5px;
            box-sizing             : border-box;
            padding                : 0 15px 25px;
            background-color       : #fff;
            border-radius          : 4px;
            box-shadow             : 2px 2px 5px #e6e6e6;
            overflow               : hidden;
            transition: all 1s;

            &:nth-child(2n) {
                margin-right: 0;
            }

            h4 {
                border-bottom: 1px solid #ececec;
                margin       : 0 0 10px 0;
                height       : 40px;
                font-size    : .9rem;
                line-height  : 40px;
                text-align   : center;
            }

            img {
                width     : 100%;
                height    : 100%;
                background: #ececec;
            }
        }
    }
}