JS/JQuery整齐的照片墙：展示很多宽高不同照片，让每一行中的所有照片高度一样，所有的行的宽度一样 |
您所在的位置：网站首页 › 照片墙四张 › JS/JQuery整齐的照片墙：展示很多宽高不同照片，让每一行中的所有照片高度一样，所有的行的宽度一样 |
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: //在页面载入时，浏览器比例发生变化时触发该方法 //浏览器的缩放比例变化时 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 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 argin: 0 auto; } ul[class=grid] li{ list-style: none; margin-top: 4px; } li[class=photo_li]{ display: inline-block; }本来想在网上搜搜这个怎么做，可能因为我搜的关键字不对，找了半天也没有找到。。。就自己写了，虽然有点费劲，但做出来了还是很开心 😄 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |