砌体不适用于莫代尔答案

【问题标题】：Masonry not working with Modal砌体不适用于莫代尔
【发布时间】：2016-06-07 13:48:18
【问题描述】：

灵感以单列的形式加载，而不是在屏幕上水平加载。如果我把它从模态框里拿出来就可以了，但是为什么不在里面呢？

内部模态

模态外

_form

<div id="inspirations-margin" class="transitions-enabled">
  <% @inspirations.each do |inspiration| %>
    <div class="box panel panel-default">
      <%= inspiration.name %>
    </div>
  <% end %>
</div>

modals.js.coffee

$ ->
  modal_holder_selector = '#modal-holder'
  modal_selector = '.modal'

  $(document).on 'click', 'a[data-modal]', ->
    location = $(this).attr('href')
    #Load modal dialog from server
    $.get location, (data)->
      $(modal_holder_selector).html(data).
      find(modal_selector).modal()
    false

  $(document).on 'ajax:success',
    'form[data-modal]', (event, data, status, xhr)->
      url = xhr.getResponseHeader('Location')
      if url
        # Redirect to url
        window.location = url
      else
        # Remove old modal backdrop
        $('.modal-backdrop').remove()

        # Replace old modal with new one
        $(modal_holder_selector).html(data).
        find(modal_selector).modal()

      false

inspirations.js.coffee

$ ->
  $('#inspirations-margin').imagesLoaded ->
    $('#inspirations-margin').masonry
      itemSelector: '.box'
      isFitWidth: true

我看到这个人遇到了similar problem，但没有得到帮助。

【问题讨论】：

你在哪里运行砌体初始化代码？
对不起，我不明白你的问题。 modals.js.coffee 在 app/assets/javascripts 下 @yts
当你使用砌体时，你必须告诉它初始化。见这里masonry.desandro.com/#initialize-with-jquery。您必须在元素位于 DOM 之后执行此操作
哦，我想我明白了。我更新了问题:) @yts

标签： javascript jquery ruby-on-rails ruby jquery-masonry

【解决方案1】：

问题是您在显示模态之前初始化砌体。您必须在显示模态后调用它。

$(modal_holder_selector).html(data).
find(modal_selector).modal()
$('#inspirations-margin').imagesLoaded ->
    $('#inspirations-margin').masonry
      itemSelector: '.box'
      isFitWidth: true

该代码应该放在显示模式的回调中

【讨论】：

@AnthonyGalli.com 我只是添加到您的代码中。在你有.modal() 的地方，你必须在之后初始化砌体。
感谢您的澄清，先生 :)

【解决方案2】：

对于引导模式：

$('#exampleModal').on( 'shown.bs.modal', function() {
  $('.grid').masonry({
    itemSelector: '.grid-item',
    gutter: 20,
    horizontalOrder: true
  });
})

Codepen

【讨论】：