点击网址后砌体不工作答案

【问题标题】：Masonry not working after click in url点击网址后砌体不工作
【发布时间】：2016-03-15 19:49:15
【问题描述】：

在我的 Rails 应用程序中，我尝试实现 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>

【问题讨论】：

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

【解决方案1】：

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

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

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

看起来这段代码属于turbolinks.js，here和你的代码一样。

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

【讨论】：

@Andy 我很高兴它有所帮助，考虑将我的答案标记为“已接受”，这样其他来这里的人就会知道问题已经解决了。