css 模拟朋友图片不同数量 排列，html 图片排列，微信朋友圈css img 自适应，微信朋友圈照片排列，vue 朋友圈图片预览，微信朋友圈缩略框尺寸，朋友圈图片尺寸，新版微信朋友圈图片大小

html部分
用了vue渲染数据，你们应该能看懂的吧。


<ul class="figure-list">
<li v-for="(vv,i) in vo.images">
<figure :style="{backgroundImage:'url('+vv+')'}">
<a @click="previewImg(i,vo.images)" href="javascript:;"></a>
</figure>
</li>

css部分：

.figure-list{
margin: 0;
padding: 0;
}
.figure-list:after{
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.figure-list li{
list-style: none;
float: left;
width: 32%;
margin: 0 1% 1% 0;
}
.figure-list figure{
/*border: 1px solid #000;*/
position: relative;
width: 100%;
height: 0;
overflow: hidden;
margin: 0;
padding-bottom: 100%; /* 关键就在这里 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.figure-list figure a{
display: block;
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}

数据部分是用vue的加载的，代码如下：

<script>
var app = new Vue({
el: '#app',
data: {
goodsId:"<?=$goods_id?>",
timesline:[],
},
methods:{
add:function(){
console.log(11);
window.location.href='/goods/timesline/add/'+this.goodsId;
},

//微信朋友圈图片滑动预览
previewImg:function(index,imgObj){
WeixinJSBridge.invoke("imagePreview",{
"urls":imgObj,//装图片的数组
"current":imgObj[imgObj]
})
},

//点击文本实现复制
clipboard:function(){
var clipboard = new Clipboard('.description');
console.log('clipboard',clipboard);
clipboard.on('success', e => {
layer.msg('已复制到粘贴板');
console.log('复制成功')
// 释放内存
clipboard.destroy()
})

},
},
mounted:function(){
this.$nextTick(function(){
var that = this;
$.get('/goods/timesline/timesline/'+this.goodsId,function(resp){
var resp = JSON.parse(resp);
that.timesline = resp.data;
});
})
},
filters:{

}
})
</script>

对你有帮助的话，麻烦下面留句话，这样我就会继续写博客，助理为乐，为快乐之本。