最终效果
实现思路
最终的效果是照片墙的每一行的高度不同(也可能相同)，对于每一行中的所有照片它们的高度一样，每一行中的所有照片宽度和一样。(有时候真感觉自己话不会说了)
要求的值就是每一行的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;
}
本来想在网上搜搜这个怎么做，可能因为我搜的关键字不对，找了半天也没有找到。。。就自己写了，虽然有点费劲，但做出来了还是很开心 😄
版权声明：本文为C573751767原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。