在 rails 4 和 bootstrap 3 和 jquery 中使用选项卡组织图像

Question

我有一个客户页面，我正在使用引导选项卡来切换客户信息和图片库。每个客户都有一个图片库。我正在使用 freewall.js (http://vnjs.net/www/project/freewall/) 在响应式网格中组织图像，其中图像适应空白空间。问题是网格正常工作的唯一选项卡（应用了jquery）是第一个。

我的html是：

<div class="container" id="client-container">
  <div class="row mb-80 mt-60">
    <div class="tabbable tabs-left">
      <ul class="nav nav-tabs mb-40 col-sm-3">
        <% @clientes.each do |cliente| %>
          <li>
            <a href="#<%= cliente.id %>", data-toggle="tab", class="tab-links"><%= cliente.name %></a>
          </li>
        <% end %>
      </ul>

      <div class="tab-content">
        <% @clientes.each do |cliente| %>
          <div class="tab-pane fade <%= 'active' if cliente == @clientes.first %>", id="<%= cliente.id %>">
            <div class="col-lg-9 col-md-8 col-sm-7 col-xs-7 border col-responsive-xs">
              <div class="description">
                <div class="pull-right">
                  <h1><%= cliente.name %></h1>
                </div>
                <div class="pull-left col-lg-9 col-md-11 col-sm-12 mt-40">
                  <p class="lead"><%= cliente.description %></p>
                  <a href="<%= cliente.link %>", target="blank">
                    <p class="lead pull-left">Visite a página da <%= cliente.name %></p>
                  </a>
                </div>

                <div class="clearfix"></div>
              </div>
              <div class="image-grid mt-60 freewall" id="freewall">

                <% cliente.cliente_photos.each do |photo| %>
                  <div class="pull-left brick">
                    <a href="<%= photo.imagem.url %>">
                      <%= image_tag photo.imagem.url, class: "img-responsive" %>
                    </a>
                  </div>
                <% end %>

              </div>
            </div>
          </div>
        <% end %>
      </div>

    </div>
  </div>
</div>

Jquery 是

function organizeImages() {
    var wall = new freewall("#freewall");   
    wall.reset({
        selector: '.brick',
        animate: true,
        cellW: 250,
        cellH: 'auto',
        gutterY: 0,
        gutterX: 0,
        onResize: function() {
            wall.fitWidth();
        }
    });
    var images = wall.container.find('.brick');
    var length = images.length;
    images.css({visibility: 'hidden'});
    images.find('img').load(function() {
        -- length;
        if (!length) {
            setTimeout(function() {
                images.css({visibility: 'visible'});
                wall.fitWidth();
            });
        }
    });
}

$(document).ready(function () {
    $('.tab-links:first').tab('show');
    organizeImages();
    $('.tab-links').on("click", organizeImages());
});

我设法做到了这一点。当页面加载第一个选项卡时，网格正确显示（如我所愿）。但是其他的没有得到应用网格的 jquery。

有人知道怎么做吗？

Answer 1

每个选项卡都可以有一个 Freewall 实例。

$(document).ready(function () {

    $(".freewall").each(function() {

        var wall = new freewall(this);   
            wall.reset({
                selector: '.brick',
                animate: true,
                cellW: 250,
                cellH: 'auto',
                gutterY: 0,
                gutterX: 0,
                onResize: function() {
                    wall.fitWidth();
                }
            });
            var images = wall.container.find('.brick');
            var length = images.length;
            images.css({visibility: 'hidden'});
            images.find('img').load(function() {
                -- length;
                if (!length) {
                    setTimeout(function() {
                        images.css({visibility: 'visible'});
                        wall.fitWidth();
                    });
                }
            });
        }

    });


    $('.tab-links:first').tab('show');

    $('.tab-links').on("click", organizeImages());
});

并且不要将选项卡的显示设置为“无”。