javascript - 将不同宽高比的图像均匀地放入多行

Question

早上好。

首先，提前致谢!很长一段时间以来，我一直是 stack overflow 的旁观者，你们很棒。

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

我想要做的事情的一个完美例子是 www.flickr.com/childe-roland。这些是我的照片，无论宽高比如何，布局都非常完美。

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

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% 使我的图像随着视口(viewport)的变化而缩小。

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

干杯!韦斯

Answer 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

这远非完美，但它可能会让您了解需要做什么。

希望对您有所帮助!