css 模拟朋友图片不同数量 排列,html 图片排列,微信朋友圈css img 自适应,微信朋友圈照片排列,vue 朋友圈图片预览,微信朋友圈缩略框尺寸,朋友圈图片尺寸,新版微信朋友圈图片大小
html部分
用了vue渲染数据,你们应该能看懂的吧。
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的加载的,代码如下:
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:{
}
})
对你有帮助的话,麻烦下面留句话,这样我就会继续写博客,助理为乐,为快乐之本。