JS/JQuery整齐的照片墙:展示很多宽高不同照片,让每一行中的所有照片高度一样,所有的行的宽度一样
最终效果
实现思路
最终的效果是照片墙的每一行的高度不同(也可能相同),对于每一行中的所有照片它们的高度一样,每一行中的所有照片宽度和一样。(有时候真感觉自己话不会说了)
要求的值就是每一行的height, 然后对每一行中的所有照片的高度赋值为height。
设一行的宽度和为w;共有n张照片,每一个照片i的宽高分别为wi和hi。因为不让照片缩放,所以wi/hi=ki是一个固定的值,需要先求出来。
- wi = hi/ki;
- w1+w2+w3+…+wn = w;
- 由前两个公式得出:
height(1/k1+1/k2+…+1/kn) = w;
||
height = w/((1/k1+1/k2+…+1/kn));
代码
js:
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.js"></script>
<script>//在页面载入时,浏览器比例发生变化时触发该方法//浏览器的缩放比例变化时window.onresize = function () {resizePhoto();}function resizePhoto() {//要先给图片的高度设置初始值,否则图片按原始大小显示会很大$('img[class=img_style]').attr('height', '200');console.log('图片高度都设置为200');var photos = $('#photo_grid li');var ul_width = $('#photo_grid').width()-100;console.log('width: '+ul_width);let i=0;while(i<photos.length){//获得元素的y坐标let tmp_Y = photos[i].offsetTop;let j=i;//第i个元素到第j-1个元素的y坐标相同while (j<photos.length&&photos[j].offsetTop===tmp_Y) j++;let sum = 0;for(let t=i;t<j;t++){sum+=(photos[t].offsetWidth/photos[t].offsetHeight);}/*为什么减去(j-i)*4:因为每个照片的左右都有间距要求的height的值应该为:height = (w-间距*照片个数)/(1/k1+1/k2+...+1/kn)。这个值是我慢慢试的,不同的css会不一样,减不减也无所谓,只是为了看起来更整齐*/let h = (ul_width-(j-i)*4)/(sum);//保留两位小数//h = h.toFixed(2);console.log(h);for (let t=i;t<j;t++){photos[t].children[0].children[0].setAttribute('height', h);}i=j;}}</script>
html:
<body onload="resizePhoto()"><div><ul class="grid" id="photo_grid"><li class="photo_li" th:each="后台给前端传的数据"><a href="#"><img class="img_style" src="#"></a></li></ul></div>
</body>
css:
ul[class=grid]{argin: 0 auto;}
ul[class=grid] li{list-style: none;margin-top: 4px;
}
li[class=photo_li]{display: inline-block;
}
本来想在网上搜搜这个怎么做,可能因为我搜的关键字不对,找了半天也没有找到。。。就自己写了,虽然有点费劲,但做出来了还是很开心
JS/JQuery整齐的照片墙:展示很多宽高不同照片,让每一行中的所有照片高度一样,所有的行的宽度一样相关推荐
- 通过JQuery获取窗口和元素的宽高
<script type="text/javascript"> $(document).ready(function() { aler ...
- js兼容性——获取当前浏览器窗口的宽高
通过onresize事件 1 window.onresize = function () { 2 document.title = client().width + " "+ cl ...
- js获取本地上传视频的宽高
![file示例](https://img-blog.csdnimg.cn/8b0e9c6c6b4e497c97f7691ff5d2df99.png?x-oss-process=image/water ...
- js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法)
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...
- jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery获取设置元素宽高位置 jquery的通过height().width().offset().positi ...
- Html百分比设宽偏差大,absolute和relative元素 设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
- 【修复日常bug】京东富文本详情图变形的多种处理方式(解决商品详情图片宽高不适应问题)
我前面写过一篇解析京东富文本详情的文章: https://blog.csdn.net/qq_35610214/article/details/102468150 上面这篇文章是处理小程序无法显示京东商 ...
- android 通过图片url获取宽高_通过 URL 获取图片宽高优化
一张小图.png 前言 客户端研发时,有时会有这样的需求,需要根据图片链接地址获取图片的宽高来进行界面排版. 一般比较正规的做法,是服务端在返回数据时将图片的信息属性一起带回来,这也符合轻客户端设计规 ...
- dreamweaver中灵活的调整表格的宽高
在使用Dreamweaver制作主页的时候往往需要改变表格的高度.然而有时当我们拖动表格的边框,无论怎样拖动,等到放下鼠标,表格却又恢复到原来的样子. 出现这种情况的原因在于我们已经为表格提供了一个固 ...
最新文章
- 干货|NLP 的四张技术路线图,带你系统设计学习路径
- 中国超细旦丝现状调研及投资前景评估报告2022-2028年版
- scala集合fold实例:将两个Map合并
- git拉取代码如何解决冲突_开源项目 git pull 代码冲突的解决方式?
- redis集群报Jedis does not support password protected Redis Cluster configurations异常解决办法...
- Unity3D笔记十七 Unity3D生命周期
- 1.10 编程基础之简单排序 06 整数奇偶排序 python
- Linux工作笔记-解决安装Qt时缺少libX11-xcb.so.1文件问题
- 构建Docker镜像指南,含实战案例
- NFT火了,12岁男孩用 Python 写了一个「表情包」,赚了250万
- html网页设计作业代码——家乡介绍-南京(7页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业
- 施一公:如何写好一篇学术论文?
- Quartz定时任务-@DisallowConcurrentExecution注解
- 浅谈中国院落文化,打造中式家居风尚!
- 新新新~Revit插件【建模助手】7大模块介绍
- mybatis从入门到精通(刘增辉著)-读书笔记第二章
- Check-N-Run: a Checkpointing System for Training Deep Learning Recommendation Models | NSDI‘ 22
- SAP物料移动科目确认由浅入深无敌大解析
- 在 github 上提交代码后,绿格子绿点没有显示
- 安卓 linux it之家,IT之家安卓版 7.07:紧凑排版+适配华为小米魅族OV系统级推送等...