单击 url 后砌体无法正常工作

Question

在我的 rails 应用程序中，我正在尝试实施 Masonry。我遇到的问题是，当我单击 link(Images) Masonry 时，Masonry 不起作用，但如果在您单击后刷新页面，它就会起作用。有任何想法吗？谢谢

这是网站：https://salty-waters-72129.herokuapp.com/images

代码：

<p id="notice"><%= notice %></p>
<head>

<script src="/assets/jquery.swipebox.js"></script>
<link rel="stylesheet" href="/assets/swipebox.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

 <link rel="stylesheet" href="/assets/responsive.css" media="screen and (max-width: 900px)" charset="utf-8">

</head>
<body>
<h1>Listing Images</h1>

 <div id='masonry'>
  <% @images.each do |image| %>
   <%= link_to image.image_url.to_s,class: "swipebox" do %>
    <div class="hov col-lg-4 col-md-4 col-sm-6 col-xs-12">
      <div class="hovereffect">
        <%= image_tag image.image_url.to_s, :class => "img-responsive" %>
          <div class="overlay">
            <h2><%= image.name %></h2>
        </div>
      </div>
    </div>
  <% end %>
<% end %>
</div>
<script src="/assets/masonry.pkgd.min.js"></script>
</body>

<script type="text/javascript">
 $(window).load(function() {
  var container = document.querySelector('#masonry');
   var msnry = new Masonry( container, {
     columnWidth: '.hov',
     itemSelector: '.hov'
   });
  });
;( function( $ ) {
    $( '.swipebox' ).swipebox();
} )( jQuery );
</script>

Answer 1

问题不在于砌体，而是当您单击 Images 时 $(window).load(...) 块不起作用。

这是因为 Images link 点击是用 javascript 处理的，它不会导致整个页面重新加载，而是发出 ajax 请求到服务器并替换页面内容。这样就不会触发$(window).load()

检查您的 js application code，ajax 请求是从 fetchReplacement = function(url, onLoadFunction, showProgressBar) {... 块发送的。

看起来此代码属于 turbolinks.js，here 与您的代码相同。

如果您实际上不需要此 turbolinks 库 - 只需将其删除即可解决问题。如果你需要它 - 检查它的文档，你应该能够订阅页面加载事件（它在 ajax 响应处理程序中 return triggerEvent(EVENTS.LOAD) ）并在那里初始化砌体。

单击 url 后砌体无法正常工作

Masonry not working after click in url

javascript

jquery

ruby-on-rails

jquery-masonry

masonry