APP---发布动态、朋友圈类似,多张图片动响应式正方形展示布局 vue.js,aui.css,apiclouv
环境:vue.js,aui.css,apicloud
1.没做控制之前。图片真实长度宽度。
2.下面用js控制高度
js部分
//js 部分
//先动态的获取属性宽度
var box4_col3 = document.getElementsByClassName("aui-col-xs-4")[0];
vm.col3 = window.getComputedStyle(box4_col3).width; //vue绑定数据
var vm = new Vue({
el: '#app',
data: {
col3:'',
}
})
css部分
<div class="aui-col-xs-4" v-for="(img, index) in item.for_img" v-bind:style=" 'overflow:hidden; height:' + col3 ">
<img :src="xxxx" onclick="open_img_big( item.for_img, index )"/>
</div>
控制后 长大于宽的部分自动隐藏,但是宽大于长的会有空白显示
3.给定义 宽高100%,图片形变压缩了
<div class="aui-col-xs-4" v-for="(img, index) in item.for_img"
v-bind:style=" 'overflow:hidden; height:' + col3 ">
<img :src="qiniu + img.qiniu_img" width="100%" height="100%"
onclick="open_img_big( item.for_img, index )"/>
</div>
4.调了很久,发现七牛云有缩略图配置
我的后台图片保存用到了七牛云存储,在七牛图片加上后缀 自动居中裁剪成 正方形
?imageView2/1/w/300/h/300/q/80|imageslim
以上完美显示!!!
APP---发布动态、朋友圈类似,多张图片动响应式正方形展示布局 vue.js,aui.css,apiclouv的更多相关文章
- Android中Xposed框架篇-微信实现本地视频发布到朋友圈功能
微信非常庞大,还好有一些强大的工具,下面就来总结收获的知识. 一.使用adb shell dumpsys activity top命令快速定位页面 二.使用Jadx进行方法跟踪时候如果发现没有结果,可 ...
- Android微信朋友圈全文、收起功能
在众多的社交类软件中,朋友圈是必不可少的,可以与好友.同学等分享自己的日常和有意思的事情,在开发社交类App时,朋友圈发表的内容你不可能让他全部显示,全部显示的话用户体验度会非常不好,这时就要用到全文 ...
- Android仿微信朋友圈,全文收起功能,附源码
在众多的社交类软件中,朋友圈是必不可少的,可以与好友.同学等分享自己的日常和有意思的事情,在开发社交类App时,朋友圈发表的内容你不可能让他全部显示,全部显示的话用户体验度会非常不好,这时就要用到全文 ...
- 用Python搞定九宫格式的朋友圈。内附“马云”朋友圈
PIL(Python Imaging Library)是一个非常强大的Python库,但是它支持Python2.X, 在Python3中则使用的是Pillow库,它是从PIL中fork出来的一个分支. ...
- css实现朋友圈照片排列布局
纯css实现朋友圈不同数量图片不同布局 首先可以打开朋友圈观察不同图片数量的几种布局,也可参考下图示例: 可以发现 除1张图片,4张图片特殊外,其他数量图片均使用一行三列的方式排列: 假设有如下HTM ...
- 微信内测"微视频" 朋友圈可以发6-8秒短视频
我们在发朋友圈时现在只能发文字和图片,图片又分为从相册中选择和直接拍摄照片,以后朋友圈拍6-8秒短视频可能是一种新的内容形式,作为文字和图片外的补充.因为微信开始内测新功能“微视频”,其产品理念与微视 ...
- 微信小程序分享至朋友圈的方法
最近研究怎么实现微信小程序分享至朋友圈,对就是朋友圈. 微信小程序目前没有直接提供方法来将小程序分享至朋友圈,不过可以采用曲线救国的方式来达到目的. 方法分两步: 1.通过浏览器将希望分享的东西风向至 ...
- Foundation 5 发布!最先进的响应式前端框架
数以百万计的设计师和工程师采用 Foundation 作为他们的产品和网站设计的前端框架.Foundation 是第一个响应式.语义化和移动优先的开源框架.最新发布的 Foundation 5 是最先 ...
- APP分享多张图片到微信和朋友圈
产品需求: 微信分享多图至好友,朋友圈.由于微信禁用了分享9图至朋友圈功能,这里分享微信只是将图片保存至本地,具体让用户手动分享. 问题分析: 微信没有提供分享多图的SDK,因此我们实现调用系统自带的 ...
随机推荐
- 64位进程调用32位dll的解决方法
64位进程调用32位dll的解决方法 最近做在Windows XP X64,VS2005环境下做32位程序编译为64位程序的工作,遇到了一些64位编程中可能遇到的问题:如内联汇编(解决方法改为C/ ...
- [leetcode 8] String to Integer
1 题目: Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input ...
- java 堆排序的实现
堆就是一个完全二叉树,堆要求是指 该节点大于它的两个子节点.而两个字节点大小不一定. 堆排序的最坏时间复杂度为nlog(n),平均也为nlog(n),占用空间为o(1),是一种比较排序算法. 堆排序也 ...
- nginx 访问频率控制
Nginx访问频率控制 HTTP服务器的吞吐率(单位时间吞吐量)通常有一个上限,尤其是普通配置的机器,在带宽够的情况下,用压测工具经常能把服务器压出翔,为了线上环境稳定性,防止恶意攻击影响到其他用户, ...
- 【计算机网络】 DNS学习笔记 (>﹏<)
参考书籍 <计算机网络-自顶向下> 作者 James F. Kurose DNS的作用 DNS是因特网的目录服务 DNS是因特网的目录服务,它提供了主机名到IP地址映射的查询服务 ...
- DataGrid列表信息保存为EXCEL到指定的路径 ---------继续DataGrid在WPF的数据绑定
一.许多WPF或者Winform程序在保存数据时,会以EXCEL或者文本的形式展现可视化界面的数据,本文就简单介绍下将DataGrid列表信息保存为EXCEL到指定的路径下,例子很简单,用的着的直接用 ...
- C# byte array 跟 string 互转
用 System.Text.Encoding.Default.GetString() 转换时,byte array 中大于 127 的数据转 string 时会出问题. 把这里的 Default 换成 ...
- Unity LuaFramework LuaBundleMode
设置 AppConst.cs 中的 LuaBundleMode 为 true,开启 Lua 代码 AssetBundle 模式. 启动程序报错,Moudle XXX not found. 我在 Ass ...
- Linux巩固记录(7) Hbase安装
zookeeper安装好,并启动成功后,接下来开始安装hbase #下载hbase wget http://mirror.bit.edu.cn/apache/hbase/1.3.1/hbase-1.3 ...
- java后端导出excel表格
转载 :https://www.cnblogs.com/zhaoyuwei/p/9038135.html 不需要在实体类些@Excel(name = "登录名", width = ...