Javascript 如何创建一个画廊，以适应不同大小的图像？

在此图像中： 在此链接：

有不同大小的图像，css似乎是自动生成的，我希望客户端能够上传到wordpress，而不必太担心图像的标准大小。此图库对每个图像都完全对齐，更改行之间的高度，并且不会使它们的大小都相同

有允许我这样做的图书馆吗？我能做到这一点的唯一方法是使用背景定位，它可以裁剪图像，还可以防止图像大小不同

---

还是有某种javascript算法可以解决这个问题？

我可以给你一个css解决方案，但你说的是针对WP上的客户端

为此，我建议使用像Unite Gallery这样的插件，用于我的WP和Joomla客户端

这是一个屏幕。它还允许像您发布的图像这样的文本覆盖

这是一个使用flex的CSS示例

.flex{
背景：ddd；
填充：1px；
显示器：flex；
柔性包装：包装；
调整内容：灵活启动；
}
.flex-4by3、.flex-3by4、.flex-1by1、.flex-2by1、.flex-1by2、.flex-3by1、.flex-1by3{
保证金：1px；
背景色：#EFEF；
背景尺寸：封面；
位置：相对位置；
}
.flex-4by3:before、.flex-3by4:before、.flex-1by1:before、.flex-2by1:before、.flex-1by2:before、.flex-3by1:before、.flex-1by3:before{
内容：“；
显示：块；
}
.flex-4by3{
弹性增长：1.33333；
弹性基准：266.667px；
最大高度：320px；
最大宽度：426.66667px；
背景图像：url（“http://lorempixel.com/267/200/food");
}
.flex-4by3:之前{
垫面：75%；
}
.flex-3by4{
弹性增长：0.75；
弹性基准：150px；
最大高度：320px；
最大宽度：240px；
背景图像：url（“http://lorempixel.com/150/200/food");
}
.flex-3by4:之前{
垫面：133.33333%；
}
.flex-1by1{
柔性生长：1；
弹性基准：200px；
最大高度：320px；
最大宽度：320px；
背景图像：url（“http://lorempixel.com/200/200/food");
}
.flex-1by1：之前{
填充顶部：100%；
}
.flex-2by1{
柔性生长：2；
弹性基准：400px；
最大高度：320px；
最大宽度：640px；
背景图像：url（“http://lorempixel.com/400/200/food");
}
.flex-2by1：之前{
垫面：50%；
}
.flex-1by2{
弹性增长：0.5；
弹性基准：100px；
最大高度：320px；
最大宽度：160px；
背景图像：url（“http://lorempixel.com/100/200/food");
}
.flex-1by2：之前{
填充顶部：200%；
}
.flex-3by1{
柔性生长：3；
弹性基准：600px；
最大高度：320px；
最大宽度：960像素；
背景图像：url（“http://lorempixel.com/600/200/food");
}
.flex-3by1:之前{
垫面：33.33333%；
}
.flex-1by3{
弹性增长：0.33333；
弹性基准：66.667px；
最大高度：320px；
最大宽度：106.66667px；
背景图像：url（“http://lorempixel.com/67/200/food");
}
.flex-1by3：之前{
垫面：300%；
}

HTML

<div>
    <img src="http://imgur.com/kj4qwHl.jpg">
    <img src="http://imgur.com/q6pFhhE.jpg">
    <img src="http://imgur.com/ngdnoYI.jpg">
    <img src="http://imgur.com/FkrSS5O.jpg">
    <img src="http://imgur.com/ux0Om6X.jpg">
    <img src="http://imgur.com/2ProEc9.jpg">
    <img src="http://imgur.com/iu39yRs.jpg">
    <img src="http://imgur.com/gx0iOdT.jpg">
    <img src="http://imgur.com/6kEuRYX.jpg">
</div>

解释

在

rspv

mixin（响应）中，它检查宽度是否符合

680px

，然后

（偶数）

和

（奇数）

图像将具有全尺寸。如果没有，mixin

grid

将发挥作用

除了正常属性：值对之外，

网格

从给定参数

$pc

（百分比）获取宽度，并在

for

循环中使用它。它将根据

$pc

的长度迭代

$i

，并返回

$pc

映射中的每个值

由于所有图像都在

div

中，因此所有混音都将包含在其中。第一个电网不需要响应要求，第二个电网需要响应要求，最后一个电网不需要计算宽度

这应该是你关于汽车的链接显示的内容。代码不多。我建议，使用CSS的预编译器。如果没有这一点，代码会多得多，制定计划也会困难得多

---

为此，您不需要javascript库，CSS中只有一些小代码required@TheDefinitionist你能详细说明一下吗？我看不出当每个图像的大小都不一样时，你怎么能让每一行的宽度完全相同？我很想看到CSStoo@Bakitai如果你坚持的话，那你就去吧，除了这是一个插件，当你改变大小时，图像之间会有间隙。这个演示是一个css方法，而不是插件的结果。插件是你的WP客户端的最佳选择。虽然我没有说这是插件的结果，但我是那个加号的：）这很有魅力，谢谢。客户可以根据需要进行维护：）@TheDefinitionist我感谢您的输入和+：）这类功能，除非您更改图像或图像顺序。我需要我的客户能够随意改变图片，而不需要继续雇佣我！这太棒了，所以+1肯定会保存这段代码以备将来使用。我不知道你想更改图像或订单，但请确认，谢谢

@mixin rspv($w) {
  @media screen and (max-width:$w) {
    @if $w==680px {
      img:nth-child(n1) {
        width:100%;
      }
    } @else {
      @content;
    }
  }
}
@mixin grid($pc...) {
  $len:length($pc);
  img {
    vertical-align:top;
    transition:all 0.5s;
    @for $i from 1 through $len {
      &:nth-child(#{$i}) {
        width: nth($pc,$i)+'%';
      } 
    }  
  }
}
div {
  margin:0 auto;
  padding:0 100px;
  +grid(26,40.7,33.3,41.9,26.7,31.4,29,38.5,32.5);
  @include rspv(860px) {
    +grid(39,61,45,55,46,54,42.9,57.1,100);
  }
  +rspv(680px);
}