jquery - 砌体调整大小问题

Question

我们正在开发一个响应移动设备的网站。然而，砌体有点小故障，因为当调整窗口大小时，它会移动以允许另一列，但列并没有填满它

http://tbd.aaronnicholls.co.uk/work

有谁知道一个很好的解决方法

谢谢

Answer 1

不确定这是否会帮助你。这就是我在我的网站上使用的内容，并且调整大小可以正常工作。也许如果你修改你的代码，它也会对你有用。

您的代码中似乎缺少以下功能。#container 是包装所有项目的容器。在您的情况下，它是工作循环 ul。.span1BoxWrapper 是项目的主要包装器。问题似乎与您的主要工作循环包装器及其宽度有关。我在萤火虫中取出了宽度，并且这些物品正确地重新定位了自己。下面缺少的功能应该可以解决这个问题。

注意：如果我将 .js 文件更改为 jquery.masonry.js （就像你一样），布局不再起作用，所以这也可能是你的问题的原因。另一个原因可能是当您调整屏幕大小时框会缩小。

<!--boxes arrangement-->
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/modernizr-transitions.js"></script>
<script>

  $(function(){

    $('#container').masonry({
      itemSelector: '.span1BoxWrapper',
      //cornerStampSelector: '.corner-stamp',
      columnWidth: 1,
      isAnimated: !Modernizr.csstransitions,
      //isRTL: true,
      isFitWidth: true
    });

  });
</script>
<style>
#container{
    background:#fff;
    padding:10px 10px 0 0;
    border:1px dotted #ccc;
    margin:0 auto 20px;
    overflow:hidden;
    clear: both;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
</style>