html排列图片,css3+html实现微信朋友圈不同尺寸图片排列预览功能

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:{

}

})

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