主干js中动态列的等高

Question

我正在尝试在主页的 div 中显示项目列表。

Home.html：

<div>
    <div id="header">
      <div class="header-left">
          Item
      </div>
      <div class="header-center">Load More</div>
      <div class="header-right"></div>
      <div class="header-line"></div>
    </div>
    <div id="containeritem">
      <!-- Here I want to write item list -->
    </div>
</div>

css：

.containeritem{
  float: left;
  height: 100%;
  position: relative;
  width: 800px;
}

.itemTemplate {
   border: 1px solid #dddddd;
   float: left;
   margin-bottom: 8px;
   margin-left: 8px;
   width: 190px;
}

主页视图：

render : function(){
  var itemCollection = new ItemCollection(itemlistdata);
  var itemListView = new ItemListView({collection : itemCollection, el : '#containeritem'});
  itemListView.render();
}   

项目列表视图：

var ItemListView = Backbone.View.extend({
    initialize: function(){
    },
    render: function(){
        this.collection.each(function(_itemData){
            var itemView = new ItemView({model : _itemData});
            this.$el.append(itemView.el);
        },this);
    }
});
return ItemListView;

项目视图：

var ItemView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },
    className : 'itemTemplate',
    render: function(){
        var _item = _.template(ItemTem);
        this.$el.html(_item(this.model.toJSON()));
    }
});
return ItemView; 

项目模板：

<div>
  <div class="itemCorner">&nbsp;</div>
  <div class="itemBrand">
    <img src="<%=Path + BrandImage%>">
  </div>
  <div class="itemImg">
    <img src="<%=Path + PictureName%>">
  </div>
</div>

<div class="bottomRow" style="bottom: 0;height: 90px;">
   <div class="itemName">
      <%=Name%>
    </div>
    <div class="itemPrice">
      <%=PriceShow%>
    </div>
</div>

• 每一列都是一个ItemView，并由ItemListView组合在一起。

• 容器和每个项目的高度设置为100%

• 我试过这个解决方案：CSS - Expand float child DIV height to parent's height，但是我的每一列都会粘在一起，这不是我想要的。

我想要的是将这些列的高度设置为等于项目的最高高度；由于每个div的内容都是动态生成的，我做不出来。

任何帮助将不胜感激。如果我在这里完全错过了什么，请原谅我的无知。

Answer 1

好吧，您可以在这里为itemImg 类设置高度。很明显，产品图像尺寸总是不同的。

另外，不要以像素为单位设置图像的高度和宽度。而是为image container class 设置高度和宽度。

所以你的 CSS 可能如下：

.itemImg {
    width: 400px;
    height: 400px;
    border: 1px solid;
    text-align: center;
    float: left;
    margin: 20px;
    position: relative;
    background:#CCC;
}
.itemimg img {
    bottom: 0;
    left: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

而且，html 会和你现在一样：

FIDDLE

在小提琴中，我使用了三个不同尺寸的图像：

Answer 2

 (function(jQuery) {
  jQuery.fn.maxHeight = function() {
    element = this;
    if ( jQuery(window).width() > 768 ) {
      var maxHeight = 0;
      element.height('auto');

      element.each(function(i, value){
        itemHeight = jQuery(value).height();
        if ( itemHeight > maxHeight ) {
          maxHeight = itemHeight;
        }
      });

     element.height(maxHeight); 
    } else {
      element.height('auto');
    }
  };
}(jQuery));

jQuery('.itemImg').maxHeight();