Question

我在我的网站中实施了砌体，因为我使用的是网格系统，它似乎是使网格正常工作的最佳和最简单的解决方案。这一切都很有效，直到我添加了

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>

CSS

    #dash_content{

  width: 100%;
  margin-left: auto;
  margin-right: auto;
  min-height: 1000px;
  height: auto;
  background-color: #aaaaaa;

}



.dash_content_ele{
  width: 300px;
  min-height: 200px;
  background-color: #ffffff;
  border-radius: 6px;
  height: auto;

  margin-bottom: 25px;
  float: left;
  box-shadow: 0px 1px 2px #555555;
  position: relative;
  background-image: url(../images/dashboard/dash_ele_background.png);
  background-repeat: repeat;
}
.dash_content_ele.w2{
  width:635px;
}

HTML

<div id="dash_content">

    <div class="dash_content_ele">

        </div><!--end dash_content_ele-->               

</div><!--end dash_content-->

Answer 1

您需要将.dash_content_ele CSS更改为使用百分比宽度而不是固定宽度（width: 300px;）。

示例

.dash_content_ele { width: 20%; }

<强> - 编辑 -

根据Arken的建议，您可以在窗口调整大小功能中调用masonry reload。

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

砌体不会在浏览器上重新加载元素调整大小

1 个答案: