在Rails中使用砌体-框在窗口调整大小时不移动 [英] Using Masonry in Rails - boxes not moving on window resize
问题描述
我已经尝试使用Masonry网站上的两个文件以及masonry-rails gem，但是遇到了同样的问题.
基本上，当我调整浏览器窗口的大小时，框不会移动以适应新的页面大小.相反，我只是在浏览器中出现滚动条.
我知道文件可以正常加载，并选择正确的选择器，因为如果更改masonry()参数中的列宽，当我加载页面时，这些框的确会出现在不同的位置.
此外，如果相关的话，我正在使用Bootstrap，但是我已经命名了选择器，因此它们不会与为引导程序保留的选择器发生冲突-例如使用#masonry-container而不是#container.
任何帮助将不胜感激，谢谢！
application.js:
//= require masonry/jquery.masonry
message_board/show:
<div id="show-message-board">
<%= render :partial => "show_message_board", :locals => { :messages => current_user.messages }, :remote => true %>
</div>
<script>
$(function(){
$('#masonry-container').masonry({
// options
itemSelector : '.item',
columnWidth : 50,
isAnimated: true
});
});
</script>
_show_message_board.html.erb:
<div id="masonry-container" class="transitions-enabled infinite-scroll clearfix">
<% messages.each do |message| %>
<div class="item">
<p class="message_from"><%= message.user.first_name %> <%= message.user.last_name %>:</p>
<p class="message_content"><%= message.content %></p>
</div>
<% end %>
我已经尝试按照其他地方的建议使用以下内容，但这仍然行不通！:
$(function(){
var $container = $('#masonry-container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.item'
});
});
});
这就是我要让Masonry在Rails项目中工作的方法.也许这会帮助您...
-
我从网站上下载了"jquery.masonry.min.js"文件，并将其放置在我的app \ assets \ javascripts目录中.
-
我添加了
-
我在app \ assets \ stylesheets目录下创建了一个单独的css文件，用于砌石(为了使事物保持整洁)，称为"masonry.css.scss".这是我拥有的CSS(我使用的是框"而不是您的项目"):
-
由于我使用的是"home \ index.html.erb"文件中的代码，因此我在app \ assets \ javascripts目录下创建了"home.js"文件.这是js代码我有:
-
最后，在我的"home \ index.html.erb"文件中，我有类似以下内容:
<div id="UserShoppingRequestsContainer"> <% @shopping_requests.each do |shopping_request| %> <div class="box col3" id="<%= shopping_request.id.to_s %>"> <%= link_to image_tag(shopping_request.request_picture.url(:medium)), user_shopping_request_path(shopping_request.user, shopping_request) %> <p class="serif1_no_padding"><%= shopping_request.category.name %></p> </div> <% end %> </div>
我想就是这样.
I have tried this using both the files from the Masonry website, plus the masonry-rails gem, but am getting the same problem.
Basically, when I resize the browser window, the boxes aren't moving to fit the new page size. Instead, I'm just getting scroll bars appearing in the browser.
I know that the files are loading fine, and picking up the right selectors, because if I e.g. change the column width in the masonry() parameters, the boxes do appear in a different place when I load the page.
Also, I'm using Bootstrap if that's relevant, but I've named the selectors so they don't clash with the ones reserved for bootstrap - e.g. using #masonry-container instead of #container.
Any help would be much appreciated, thanks!!
application.js:
//= require masonry/jquery.masonry
message_board/show:
<div id="show-message-board">
<%= render :partial => "show_message_board", :locals => { :messages => current_user.messages }, :remote => true %>
</div>
<script>
$(function(){
$('#masonry-container').masonry({
// options
itemSelector : '.item',
columnWidth : 50,
isAnimated: true
});
});
</script>
_show_message_board.html.erb:
<div id="masonry-container" class="transitions-enabled infinite-scroll clearfix">
<% messages.each do |message| %>
<div class="item">
<p class="message_from"><%= message.user.first_name %> <%= message.user.last_name %>:</p>
<p class="message_content"><%= message.content %></p>
</div>
<% end %>
EDIT:
I've tried using the following as suggested elsewhere, and that still doesn't work!:
$(function(){
var $container = $('#masonry-container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.item'
});
});
});
Here's what I did to get Masonry to work in my Rails project. Perhaps this will help you...
I downloaded the "jquery.masonry.min.js" file from the site and placed it in my app\assets\javascripts directory.
I added
//= require jquery.masonry.min
to my application.js file
I created a separate css file for masonry (just to keep things neat) called "masonry.css.scss" under my app\assets\stylesheets directory. This is the CSS I have (I'm using "box" instead of your "item"):
.box { margin: 5px; padding: 5px; background: #D8D5D2; font-size: 11px; line-height: 1.4em; float: left; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: inline; width: 260px; }.box img { width: 100%; }
Since I'm using the code in my "home\index.html.erb" file, I created a "home.js" file under my app\assets\javascripts" directory. This is the js code I have:
jQuery(document).ready(function () {
var $container = $('#UserShoppingRequestsContainer');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector:'.box',
isAnimated:true,
animationOptions:{
duration:750,
easing:'linear',
queue:false
}
});
});
})
Finally, in my "home\index.html.erb" file, I have something like this:
<div id="UserShoppingRequestsContainer"> <% @shopping_requests.each do |shopping_request| %> <div class="box col3" id="<%= shopping_request.id.to_s %>"> <%= link_to image_tag(shopping_request.request_picture.url(:medium)), user_shopping_request_path(shopping_request.user, shopping_request) %> <p class="serif1_no_padding"><%= shopping_request.category.name %></p> </div> <% end %> </div>
I think that's it.
这篇关于在Rails中使用砌体-框在窗口调整大小时不移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
