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:{
}
})
对你有帮助的话,麻烦下面留句话,这样我就会继续写博客,助理为乐,为快乐之本。
html排列图片,css3+html实现微信朋友圈不同尺寸图片排列预览功能相关推荐
- Android免费的导出微信朋友圈文字和图片的工具
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! ...
- Android自定义弹窗模仿微信,Android 仿微信朋友圈点赞和评论弹出框功能
本文简单模仿微信朋友圈的点赞和评论弹出框,布局等细节请忽略,着重实现弹出框.发评论,及弹出位置的控制. 1. 微信弹出框 微信朋友圈的点赞和评论功能,有2个组成部分: 点击左下角的"更多&q ...
- android 打开微信好友动态图片,Android GridView仿微信朋友圈显示图片
最近项目要求上传多图并且多图显示,而且要规则的显示,就像微信朋友圈的图片显示一样. 利用GridView再适合不过了,GridView可以动态加载图片的数量,而且还比较规律,下面说一下自己的思路: 1 ...
- 小程序-仿微信朋友圈拖动删除图片
♠ 目的 微信小程序实现图片拖动删除,效果同朋友圈的图片拖动删除效果 ♠ 实现原理 1.使用微信小程序组件 movable-area 和 movable-view 进行拖动处理 2.根据屏幕高度.图片 ...
- uniapp图片自适应_uniapp 仿微信朋友圈,微博晒图 图片自适应排版
data() {return{ imgPicList: [], imgboxtype:0, imgwidth:0, imgpad:0, imgheight:''} }, props: { imgLis ...
- Android 仿微信朋友圈不同数量图片排列方式
前段时间做了不同数量的图片展示,给大家分享一下,先上个效果图: 代码比较简单,相信大家都看得懂: public class DynamicImageAdapt ...
- 微信朋友圈的实现(图片查看,手势放大、缩小)
效果图: 简单的就这样,实现效果的方法有多种,可以使用ListView嵌套GridView,也可以直接使用RecycleView,这里只说RecycleView的实现方法. 难一点的地方就是每个ite ...
- Android自定义九宫格图片展示,类似微信朋友圈
之前网上也找了很多类似的功能,但是很多放在列表中复用item就出现高度测量是0,出现条目中图片空间不显示问题 这里做了一些优化,解决该问题 具体可参考这篇博客,(这里要感谢博主)不过这个放在列表复用时 ...
- css微信朋友圈的九宫格图片自适应效果
HTML结构: <div class="pictures"><img src="image1.jpg" alt="图片1" ...
最新文章
- 机器学习:计算学习理论
- RAID磁盘阵列——扫盲篇
- JavaScript兼容HTML代码的注释
- pywin32官方说明文档_GEE学习笔记 六十五:GEE的Python版API说明文档(英文版)
- Oracle 大规模 delete,update 操作 注意事项
- [设计模式] ------ 原型模式(浅拷贝和深拷贝)
- matlab时频分析工具箱安装_EEG时频分析介绍与实现(基于EEGLAB、NetStation与Analyzer2软件)...
- “红孩儿”成中科院博士!做CTO身价过亿!
- abstract class和interface有什么区别?_程序员必须掌握了解的21个Java核心技术,还在等什么?...
- 成为高级程序员的 10 个步骤
- 计算流体力学编程作业matlab,中科大计算流体力学CFD之大作业二.doc
- word下载后为php_php生成word并下载代码实例
- 遮羞布被撕,业界反思5G的冒进,运营商重视挖掘现有5G网络的潜力
- 开源搜索引擎评估:lucene sphinx elasticsearch
- IOMMU/SMMUV3代码分析(1)SMMU设备的分配
- 这种股权结构一定要远离!
- potplayer默认专辑加载同一文件夹下所有视频,只读取一部分视频,加载视频目录不完整
- GIT科普系列5:index in git
- Mybatis新增数据,存在就更新,不存在就添加
- android版音乐播放器----卡拉OK歌词实现(二)
热门文章
- jQuery lightBox plugin 灯箱效果
- [更新]android平板手机 通过usb otg 来充电(以nexus 7 一代为例USB ROM)
- 计算机专业大专还学语数外吗,大学越学越秃的5大专业:计算机排第五,数学落榜,榜首实至名归...
- Python 数据分析微专业课程--项目08 中国姓氏排行研究
- Xilinx FPGA PCIe XDMA性能测试报告(一)
- 中海达RTK(星移差分)使用指南
- 暗影精灵3安装ubantu/deepin(linux)系统后无法wifi上网
- 2021-07-04 IP地址与子网掩码
- projece修改工期_工期设定(Project)
- 无法控制SpringBoot 中的DEBUG日志