jQuery кладка с процентной шириной - PullRequest
Новая
       2

jQuery кладка с процентной шириной

15 голосов
/ 09 декабря 2011

есть ли способ заставить jquery masonry работать с div в процентах от ширины?Я пытаюсь создать гибкий макет с шириной 25%, 50%, 75% и 100%.Но как только я устанавливаю ширину с помощью%, автоматическое изменение размера перестает работать, и если я пытаюсь вручную активировать onresize масона, я получаю ошибки округления, которые заставляют div прыгать вокруг.Также становится довольно глючно, что иногда игнорирует высоту, а иногда просто перестает размещать div и помещает их все в 0,0

HTML разметка: 

    <div class="boxes">
    <div class="box weight-1">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-1">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-2">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
    <div class="box weight-3">
        <div class="inner">
        <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
        </div>
    </div>
</div>

Свойства CSS: 

.weight-1 {
width:25%;
}

.weight-2 {
width:50%;
}

.weight-3 {
width:75%;
}

.weight-4 {
width:100%;
}

Muchos gracias для любого ввода, J

Ответы [ 4 ]

12 голосов
/ 12 июня 2012

забудьте о .wight и добавьте только это в css 

    .box {
      width: 25%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

кладка js 

$(function(){
    var container = $('#boxes');

    container.imagesLoaded(function(){  
        container.masonry({
           itemSelector: '.box',
           columnWidth: function( containerWidth ) {
              return containerWidth /4;// depends how many boxes per row
            }(), // () to execute the anonymous function right away and use its result
            isAnimated: true
        });
    });
});

изменить держатель div на 

 <div id="boxes" class="masonry clearfix">

и коробки на 

<div class="box">...</div>

(обратите внимание, что Firefox может вызывать проблемы с битом с точным делителем 100, например, 25%, поэтому установите флажки на 24,9 или 24%) устарел .

Используйте определение размера блоков, чтобы избежать падения столбца.

8 голосов
/ 16 мая 2013

У меня такая же проблема, попробуй, попробуй и попробуй, и эта работа для меня. 

.masonry-brick {
   width:25%;/*or others percents*/

   /*following properties, fix problem*/
   margin-left:-1px;
   transform:translateX(1px);
}
1 голос
/ 29 марта 2015

У меня была такая же проблема… решил ее с помощью опции css calc. Это прекрасно работает, но не при изменении размеров окон, тогда это немного сходит с ума… 

@media screen and (min-width:1020px){.brick { width: calc((100% - 40px) / 5); }}

@media screen and (min-width:800px) and (max-width:1019px){.brick { width: calc((100% - 30px) / 4); }}

@media screen and (max-width:799px){.brick { width: calc((100% - 10px) / 2); }}
0 голосов
/ 11 июля 2013

Если вы хотите 25% ширина, а не 24.9% добавьте margin-left:-1px!important; в ваш ящик

...