Вопрос об изменении размера каменной кладки

Question

Мы работаем над сайтом, который реагирует на мобильные устройства. Однако кладка немного Glitchy в том смысле, что при изменении размеров окна, он перемещается, чтобы на другой столбец, но столбцы не заполнить его

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

Кто-нибудь знает хорошее решение этой

спасибо

Answer 1

Не уверен, что это поможет вам. Это то, что я использую на своем сайте, и изменение размера работает так, как должно. Возможно, если вы измените свой код, он будет работать и на вас.

Функция, которая, как представляется, отсутствует в вашем коде. Контейнер # - контейнер, который обертывает все элементы. В вашем случае это петля работ ul. .span1BoxWrapper, является основной оболочкой элементов. Проблема, похоже, связана с вашей основной оберткой-обтекателем и ее шириной. Я взял ширину в firebug, и предметы переместились правильно. Недопустимая функция ниже должна исправить это.

Примечание: если я изменил свой .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>