Javascript 砌体未在浏览器上重新加载图元调整大小

Javascript 砌体未在浏览器上重新加载图元调整大小,javascript,jquery,css,jquery-masonry,Javascript,Jquery,Css,Jquery Masonry,我在我的网站中实现了砌石,因为我使用的是网格系统,它似乎是使网格正常工作的最好、最简单的解决方案。这一切都很好,直到我添加了 isFitWidth=true 声明。它在集中网格方面起作用,但是当我调整浏览器大小时,网格不再重新加载。以前,当我使浏览器变小时,网格元素在彼此下方移动,现在它们只在我手动重新加载页面或使浏览器变大时重新加载,而不是在我使其变小时重新加载 你知道为什么吗 JQUERY <script> $(document).ready(function() { var

我在我的网站中实现了砌石,因为我使用的是网格系统,它似乎是使网格正常工作的最好、最简单的解决方案。这一切都很好,直到我添加了

isFitWidth=true

声明。它在集中网格方面起作用,但是当我调整浏览器大小时,网格不再重新加载。以前,当我使浏览器变小时,网格元素在彼此下方移动,现在它们只在我手动重新加载页面或使浏览器变大时重新加载,而不是在我使其变小时重新加载

你知道为什么吗

JQUERY

 <script>
$(document).ready(function() {

var $container = $('#dash_content');
// initialize
$container.masonry({
  columnWidth: 300,
  itemSelector: '.dash_content_ele',
  isFitWidth: true, 
  gutter: 35,
  isResizable: true
});
    });
</script>
HTML


您需要更改
.dash\u content\u ele
CSS以使用百分比宽度而不是固定宽度(
宽度:300px;

示例

.dash_content_ele {
    width: 20%;
}
--编辑--

正如Arken所建议的,您可以在窗口调整大小函数中调用砌体重新加载

$(window).resize(function () {
    $('#container').masonry('reloadItems');
});

我必须使用一个固定的宽度,一个是因为我不希望元素改变大小,另一个是因为百分比宽度不适用于isFitWidth:是的,元素彼此折叠。谢谢,我明白了,说得好。您是否介意在砖石布局附近创建一个JSFIDLE,以便我可以帮助您解决此问题?您好,我只是想告诉您,我已通过添加一个通过浏览器调整大小事件触发的砖石重新加载修复了此问题。谢谢你的邀请help@AfromanJ在原始帖子的代码中,resize函数应该放在哪里?@Desi您可以将resize函数放在“$(document).ready(function(){”中的任意位置
.dash_content_ele {
    width: 20%;
}
$(window).resize(function () {
    $('#container').masonry('reloadItems');
});