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);
html图片展示特效
window.location.href='/goods/timesline/add/'+dsId; },
//朋友圈图⽚滑动预览
previewImg:function(index,imgObj){
WeixinJSBridge.invoke("imagePreview",{
"urls":imgObj,//装图⽚的数组
"current":imgObj[imgObj]
})
},
//点击⽂本实现复制
clipboard:function(){
var clipboard = new Clipboard('.description');
console.log('clipboard',clipboard);
<('success', e => {
layer.msg('已复制到粘贴板');
console.log('复制成功')
// 释放内存
clipboard.destroy()
})
},
},
mounted:function(){
this.$nextTick(function(){
var that = this;
$.get('/goods/timesline/timesline/'+dsId,function(resp){
var resp = JSON.parse(resp);
that.timesline = resp.data;
});
})
},
filters:{
}
})
对你有帮助的话，⿇烦下⾯留句话，这样我就会继续写博客，助理为乐，为快乐之本。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。