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; } } } }
和 qi 一样的想法…
我都好久没换域名了
又换域名了？ [weixiao]
没换啊，原来的中文域名用，英文的也同步绑定了