我有一个div称它为#container,
在这个#container里面,我有数量的img标签称之为图像
n可以是2,10,40等等.
我想知道如何在一个#container内容纳数量的图像来关闭所有的空白区域.质量无关紧要
这是我到现在为止所做的
在这个#container里面,我有数量的img标签称之为图像
n可以是2,10,40等等.
我想知道如何在一个#container内容纳数量的图像来关闭所有的空白区域.质量无关紧要
这是我到现在为止所做的
var amount = $("#container > img").length;
var amount_w = amount*200; //200 width of 1 image
var amount_h = amount*130; //120 height image
var refH = $("#container").height();
var refW = $("#container").width();
var refRatio = refW/refH;
$("#container img").each(function(){
$(this).height((amount_h-130)-refH);
$(this).width((amount_w-230)-refW);
});
解决方法
首先,即使在保持图像的纵横比的同时也可以实现您所需要的 – 但是行高将被计算,但并不是一件简单的任务(至少不如单行公式那么简单) ).
有一个我开发的名为jPictura的jQuery插件.我相信该插件完全符合您的需要.
简单的例子如何使用插件：
$(document).ready(function () {
$('#my-gallery').jpictura({
layout: { itemSpacing: 0,justifyLastRow: true,idealRowHeight: 200}
});
});
> itemSpacing – 图像之间的空间量,以像素为单位
> justifyLastRow – 如果为true,最后一行中的图像将被拉伸以占据行的全部宽度
> idealRowHeight – 行的所需高度(以像素为单位).该插件将尽力安排这些项目,使得行高度尽可能靠近该值.
>在GitHub上有更多的选项记录
除了计算图像的正确宽度和高度的JS内容之外,还有一件需要考虑的图像之间的空白空间.图像是默认的内嵌块,这意味着它们的行为就像单词和单词之间有一些空白的空间,对吧？使它们显示：block; float：left;或使用弹性框布局来摆脱空格.该插件使用float：left;默认.
