Question

我有一个div称之为#container，在此#container内，我有n个img个标记，称之为images n可以是2,10,40等等。我想知道如何在n内images量#container来关闭所有空白stretch图像。质量并不重要这是我到现在为止所尝试的：

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);
});

Answer 1

首先，即使在保持图像的纵横比的情况下也可以实现所需 - 然而行高将被计算，但这不是一项简单的任务（嗯，至少不像单行公式那样微不足道。）

我开发了一个名为 jPictura 的jQuery插件。我相信这个插件完全符合你的需要。

<强> Here is a working fiddle

您可以在GitHub找到插件源代码和文档。

如何使用插件的简单示例：

$(document).ready(function () {
    $('#my-gallery').jpictura({
        layout: { itemSpacing: 0, justifyLastRow: true, idealRowHeight: 200}
    });
});

itemSpacing - 图像之间的空间量（以像素为单位）
justifyLastRow - 如果为true，则最后一行中的图像将被拉伸以占据行的整个宽度
idealRowHeight - 行的所需高度（以像素为单位）。该插件将尽力安排项目，以便行高度尽可能接近此值。
GitHub上记录了更多选项

除了计算图像正确宽度和高度的JS之外，还有一件事需要考虑图像之间的空白区域。图像默认为内联块，这意味着它们的行为类似于单词，而单词之间确实有一些空白区域，对吧？使它们display: block; float: left;或使用弹性框布局来摆脱空白区域。该插件默认使用float: left;。

Answer 2

我创造了你可能感兴趣的东西

var container = $('#container');
var height = container.outerHeight();
var width = container.outerWidth();

function populate(n){
    var rem_items = n;
    var rows = Math.round(Math.sqrt(n));
    var row_items = Math.ceil(n/rows);

    for (var i=0; i<rows; i++){

        // this prevents us from generating a lonely single box in a row
        if( (rem_items%(rows-i))===0 ){
            row_items = rem_items/(rows-i);
        }

        if(rem_items<row_items){
            row_items = rem_items;
        }

        rem_items = rem_items-row_items;

        for (var j=0; j<row_items; j++){
            var img_height = height/rows;
            var img_width = width/row_items;
            var img_left = j*img_width;
            var img_top = i*img_height;
            var img = $('<div class="cell"></div>');
            img.css({
                width: img_width,
                height: img_height,
                left: img_left,
                top: img_top
            });
            container.append(img);
        }
    }
}

populate(40);

https://jsfiddle.net/jLq4hgaa/1/

基本上，它会水平和垂直地计算图像的“最平衡”分布。

它以最简洁的意义完成了你所要求的。无论纵横比如何，它都能将图像/容器均匀分布在容器内。

Answer 3

$(document).on("pageload",function(){
  $('.container').addClass('stretch');
});

然后创建一个名为“stretch”的css元素，定义宽度：100％

高度：100％，如果需要定义布局，即相对

JS / jQuery适合div中的所有图像（没有空格）

3 个答案: