动态显示图像的逻辑

Question

我的html布局会使一个图像变小而其他图像变大。如果所有图像都具有相同的大小，则可以很容易地循环并创建html。

这是Fiddle。

所有图片都在文章部分，但第一篇文章使用了一个css类，第二篇文章使用了不同的内容。

<article class="idea col-xs-12 col-sm-6 col-lg-4">
  <div class="image">
    <a href="#">
      <img src="mygal/images/1.jpg" alt="" />
    </a>
    <div class="ide">
      <a href="#">
        <p>
          <strong>TTTTTTTTTT</strong>
          <span class="name">/DDDDD</span>
        </p>
      </a>
                                </div>
  </div><!-- /.image -->
</article>

这是预期的输出。

我怎样才能使用javascript生成预期的输出。我有代码，它获取数据但我需要逻辑如何绑定数据以产生预期的输出。

Answer 1

在给定的示例网格中，看起来所有图像都具有相同的宽度。我会将图像包装在div元素中，并为它们提供固定的宽度和高度。您可以将图像的宽度设置为100％以与包装的div对齐。