将不同纵横比的图像均匀地放入多行答案

【问题标题】：fit images with different aspect ratios into multiple rows evenly将不同纵横比的图像均匀地放入多行
【发布时间】：2014-06-02 00:55:39
【问题描述】：

早上好。

首先，提前致谢！很长一段时间以来，我一直是堆栈溢出的旁观者，你们很棒。

我希望为我的网页 www.eden-koru.com 创建一个照片布局，其中照片以行显示。由于裁剪，以及不同的相机，每张照片可能有不同的纵横比，因此在放置时会有很多不均匀的间隙。

我想做的一个完美的例子是 www.flickr.com/childe-roland。这些是我的照片，尽管纵横比，所有的布局都很完美。

在一个不同但类似的问题上，我找到了一个 80% 的解决方案，这个 JSFiddle http://jsfiddle.net/martinschaer/aJtdb/：

var container_width = $('#container2').width();
var container_width_temp = 0.0; // must be float!
var container_height = 100.0; // random initial container heigth for calculations

$('#container2 img').each(function(){
    var newwidth = (this.width / this.height) * container_height;
    this.width = newwidth;
    $(this).data('width', newwidth); 
    container_width_temp += newwidth;
});

$('#container2 img').each(function(){
    this.width = $(this).data('width') * (container_width / container_width_temp);
});

现在，这只适用于一排。我没有使用 JQuery 的经验，但我能够看到数学并创建一个“row_counter”变量来计算图像包装器 div 的数量......这让我达到了 90%。我只是将最终宽度乘以该行数，然后减去几个像素来弥补边距。

看起来像这样：

$('.imageWrapper').each(function(){
    rows +=1;
});

我的 div 布局如下所示：

<div class="mainWrapper">
    <div class="imageWrapper">
        <img width="326" src="images/_DSC4434.jpg"></img>
        <img width="276" src="images/_DSC4537.jpg"></img>
        <img width="254" src="images/_DSC4483.jpg"></img>
    </div>
    <div class="imageWrapper">
        <img width="276" src="images/_DSC0253.jpg"></img>
        <img width="306" src="images/The_Alaska_RangeIR.jpg"></img>
        <img width="275" src="images/DSC_9111.jpg"></img>
    </div>
    <div class="imageWrapper">
        <img width="276" src="images/_DSC4689.jpg"></img>
        <img width="276" src="images/_DSC4718.jpg"></img>
        <img width="276" src="images/_DSC4738.jpg"></img>
    </div>
</div>

我的 CSS 是这样的：

.mainWrapper {
  background-color: black;
  margin: 0 auto 50px auto;
  width: 70%;
  height: auto;
  border: 2px solid white;
  border-radius: 10px;
  clear: both;
  padding: 7px 7px 7px 7px;
  text-align: center;
  overflow: hidden;
}
.mainWrapper .imageWrapper {
  overflow: hidden;
  width: 100%x;
  margin: 0px auto 0px auto;
}
.mainWrapper .imageWrapper img {
  display: inline-block;
  border: 1px solid #fff;
}

现在，它看起来比以前更好了，但仍然存在很多我无法通过样式来解释的不均匀性。此外，我不能再使用width: 100% 使我的图像随着视口的变化而缩小。

我希望我已经提供了足够的细节。请记住，我对 JQuery 一无所知，并且 5 年没有接触过 JavaScript。我是一名 IT 专业的学生，毕业后加入了海军，直到上周才再次编码。

干杯！韦斯

【问题讨论】：

你为什么不使用同位素砌体插件desandro.github.io/masonry/demos/basic-multi-column.html
您的具体问题是什么？
@jfriend00 对不起，你是对的......我实际上并没有使用问号。我想修复我的代码以均匀地适合图像。完美。我该怎么做？
@San 我一定会看看的。我更喜欢从头开始，这样我可以更好地学习编码。但是，如果我变得足够沮丧，我会尝试一下...我只是对消除我的编码技能和学习新事物感兴趣...
自己编码是件好事。但插件的优势在于错误更新。

标签： javascript jquery html css image

【解决方案1】：

这是相当复杂的事情。我设法制作了一个几乎可以实现您想要的 jQuery 插件，当用户调整其浏览器窗口大小时，我在使其动态化时遇到了一些问题，但忽略这一点，它应该可以满足您的要求。

jQuery 插件

(function ( $ ) {         
$.fn.gallery = function( options ) {
    var settings = $.extend({
        imgs: [],
        row_height: 300,
        margin: 10
    }, options);

    var container = $(this);

    //create a div for each image
    for(var i=0;i<settings.imgs.length;i++){
        $(this).append("<div class='imgwrapper'></div>");
    }

    //setup the css for the imgwrappers
    $("head").append("<style type='text/css'>.imgwrapper{ float: left; margin-left: "+settings.margin+"px; margin-top: "+settings.margin+"px; height: 261px; background-repeat: no-repeat; background-position: center; background-size: cover;}</style>")

    //define some global vars
    var imgs_aspect = [];
    var imgs_rows = [0];
    var tot = 0;
    var loaded = 0;

    function setup(){
        var imgs = settings.imgs;
        var row_width = 0;
        $(".imgwrapper").each(function(index){
            var imgwrapper = $(this);
            var img = new Image();
            img.src = imgs[index];
            img.onload = function(){
                //determine the aspect ratio of the image
                var img_aspect = img.height/img.width;
                imgs_aspect.push(img_aspect);
                //work out a rough width for the image
                var w = settings.row_height*img_aspect;
                row_width += w;
                //check if there is still space on this row for another image
                if(row_width >= container.width()){
                    imgs_rows.push(1);
                    row_width = 0;
                }
                else{
                    imgs_rows[imgs_rows.length-1]++;
                }
                //set some of the css vars
                imgwrapper.css("width",w+"px"); 
                imgwrapper.css("height",settings.row_height+"px"); 
                imgwrapper.css("background-image","url("+imgs[index]+")");
                loaded++;
                checkIfLoaded();
            }
        });
    }

    function checkIfLoaded(){
        //make sure all images are loaded
        if(loaded == $(".imgwrapper").length){
            setHeight();
        }
    }

    function setHeight(){
      for(var r=0;r<imgs_rows.length;r++){
        if(r==0){
          var y = 0;
        }
        else{
          var y = 0;
          for(var j=0;j<r;j++){
            y += imgs_rows[j]
          }
        }
        if(imgs_rows[r] == 0){

        }
        else{
          tot = 0;
          for(var i=y;i<(y+imgs_rows[r]);i++){
            tot += imgs_aspect[i];
          }
          //work out optimum height of image to fit perfectly on the row
          var h = ((container.width()-(settings.margin*(imgs_rows[r]+1)))/tot);
          $(".imgwrapper").each(function(index){
            if(index >= y && index < (y+imgs_rows[r])){
                //work out width using height
                var w = h*imgs_aspect[index];
                $(this).css("width",w+"px");
            }
          });
        }
      }
    }
    setup();
};

}( jQuery ));

如何使用

var images = ["http://lorempixel.com/300/300",
          "http://lorempixel.com/250/250",
          "http://lorempixel.com/200/200",
          "http://lorempixel.com/210/220",
          "http://lorempixel.com/210/230",
          "http://lorempixel.com/260/230",
          "http://lorempixel.com/410/830",
          "http://lorempixel.com/300/200",
          "http://lorempixel.com/250/250",
          "http://lorempixel.com/200/200",
          "http://lorempixel.com/210/220",
          "http://lorempixel.com/210/230",
          "http://lorempixel.com/260/230",
          "http://lorempixel.com/410/830"];
$(".container").gallery({imgs:images, margin: 0, row_height: 300});

images 是一个数组，其中应包含您希望使用的图像 url。容器可以具有任何所需的宽度（在 css 中定义）。 margin 值允许您在图像周围有类似的白色边框。由于我在您的代码中看到您有一个行高，因此这也是通过更改 row_height 值来实现的。

演示：http://codepen.io/motorlatitude/pen/iHgCx

这远非完美，但它可能会让你知道你需要做什么。

希望对你有帮助！

【讨论】：