Rails Masonry 插件的
做个 rails 网站基本都是静态页面 用的 bootstrap 框架 打开网页首次进入非要刷新下才实现 Masonry js 插件 图片对齐效果 什么原因啊 有人用过吗？
去掉了turbolinks还是不行，网上有在<head> </head> 加入一段 js 脚本刷新一次，可是都有问题啊，没能用的，还有的是定时刷新更用不了，谁有靠谱的办法啊。
觉得是图片太多 读取 CSS 样式表或 JS 插件时卡死了，不知道哪里问题。
你可以用这个 Gem masonry-rails.
然后，如一楼所说，这是一个 turbolinks 导致的问题。
你需要用到ready page:load来使你的 js 代码被正确读取到，一个例子如下：
$(document).on 'ready page:load', ->
$ ->
$('#products').imagesLoaded ->
$('#products').masonry
itemSelector: '.box'
isFitWidth: true
当然，你也可以用这个 Gem jquery.turbolinks 来解决你所遇到的“必须要刷新页面”才能正常读取到各类 jQuery 插件的问题。
用了这个 gem jquery.turbolinks 还是不行啊，能帮助再看下吗？
<title>SarahTree</title>
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/bootstrap.min.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/bootstrap-theme.min.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/font-awesome.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/main.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/main.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/plugins.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="/QFnI8CwuvSRa7CqIQdBNBr6LGNk/EVhXRetmxfPN2Q=" name="csrf-token" />
js 加载规划
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap.min
//= require_tree .
//= require turbolinks
用了笨办法临时解决了 加了段脚本，就是网址变得怪异了，连接到其他网页再退回来也有问题，凑合先用着，慢慢研究一下要。
<Script>
function reurl(){
url = location.href;
var times = url.split("?");
if(times[1] != 1){
url += "?1";
self.location.replace(url);
}
}
onload=reurl
</script>
上面的方法都试了下，没解决；最近又看了看 网上资料 觉得真不是turbolinks 的问题，原因有可能在于 Masonry 插件在图片未读取完毕前就完成了 自动对齐，这样重新涮新一次时由于缓存里有了这些图片，加在时间少了，也就正常了。
那么怎么控制让图片加载完毕再进行下一步渲染，可能需要用到 jquery 手动进行了，简单用 HTML 难以实现，再学习下 离最终目标近了一步了。