砌体不与Modal合作

Question

灵感作为单个列加载，而不是在屏幕上水平加载。如果我把它从模态中拿出来，它可以工作，但为什么不在里面呢？

内部模态

外部模态

_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，但从未得到过帮助。

Answer 1

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

files=( * )
printf '%s\0' "${files[@]:0:40000}" | xargs -0 rm

该代码应该出现在显示模态

的回调中

Answer 2

对于 Bootstrap 模态：

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

Codepen