Question

早上好。

首先，先谢谢！很长一段时间我一直是筹码溢出的观众，你们很棒。

我希望为我的网页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%使视频缩小视角。

我希望我已经给出了足够的细节。请记住，我对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 是一个数组，应包含您要使用的图片网址。容器可以具有任何所需的宽度（在css中定义）。 margin 值允许您在图像周围具有类似的白色边框。由于我在您的代码中看到您有行高，因此只需更改 row_height 值即可实现。

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

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

希望它有所帮助！

将具有不同宽高比的图像均匀地分成多行

1 个答案: