Элементы масонства рушатся друг на друга

Это первый раз, когда я использовал плагин jQuery enter link description here, и я не могу понять, почему он отображается неправильно; Я имею в виду, я полагаю, что это имеет какое-то отношение к абсолютному позиционированию, поскольку все они рушится друг с другом, но я считаю, что правильно настроил его?Элементы масонства рушатся друг на друга

CodePen:http://codepen.io/gutterboy/pen/bENEyq

Edit:

теперь у меня есть это, http://codepen.io/gutterboy/pen/xZbVBw - я не могу показаться, т заставить его работать с 3-мя колоннами с расстоянием между ними, хотя.

HTML:

<div class="container"> 
     <div class="row"> 
     <div class="col-sm-12"> 
      <div class="grid"> 
      <div class="item"> 
       <div class="image"> 
       <img src="http://weknowyourdreams.com/images/car/car-03.jpg" class="img-responsive" /> 
       </div> 
       <div class="text"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus. 
       </div> 
      </div> 
      <!-- Item Ends --> 
      <div class="item"> 
       <div class="text"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus. 
       </div> 
      </div> 
      <!-- Item Ends --> 
      <div class="item"> 
       <div class="image"> 
       <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150918170501-frankfurt-motor-show-concept-cars-4-super-169.jpg" class="img-responsive" /> 
       </div> 
       <div class="text"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus. 
       </div> 
      </div> 
      <!-- Item Ends --> 
      <div class="item"> 
       <div class="image"> 
       <img src="http://resources.carsguide.com.au/styles/cg_hero_large/s3/McLaren-P1_0.jpg" class="img-responsive" /> 
       </div> 
       <div class="text"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus. 
       </div> 
      </div> 
      <!-- Item Ends --> 
      <div class="item"> 
       <div class="image"> 
       <img src="http://car-pictures.cars.com/images/?IMG=cac10foc051c01401.png&WIDTH=624&AUTOTRIM=1&SPECIAL=&ACT=F" class="img-responsive" /> 
       </div> 
       <div class="text"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus. 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus. 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus.    
       </div> 
      </div> 
      <!-- Item Ends --> 
      <div class="item"> 
       <div class="image"> 
       <img src="http://weknowyourdreams.com/images/car/car-03.jpg" class="img-responsive" /> 
       </div> 
       <div class="text"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus. 
       </div> 
      </div> 
      <!-- Item Ends --> 
      <div class="item"> 
       <div class="image"> 
       <img src="http://media.truelocal.com.au/1/B/11A5BD61-BB2D-4E6D-BF87-FB2C5B4C56CB/budget-car-and-truck-rental-brisbane-brisbane-car-rental-rental-cars-brisbane-5427-938x704.jpg" class="img-responsive" /> 
       </div> 
       <div class="text"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus. 
       </div> 
      </div> 
      <!-- Item Ends --> 
      <div class="item"> 
       <div class="image"> 
       <img src="http://weknowyourdreams.com/images/car/car-03.jpg" class="img-responsive" /> 
       </div> 
       <div class="text"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus. 
       </div> 
      </div> 
      <!-- Item Ends --> 
      <div class="item"> 
       <div class="image"> 
       <img src="http://weknowyourdreams.com/images/car/car-03.jpg" class="img-responsive" /> 
       </div> 
       <div class="text"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus. 
       </div> 
      </div> 
      <!-- Item Ends --> 
      <div class="item"> 
       <div class="image"> 
       <img src="http://weknowyourdreams.com/images/car/car-03.jpg" class="img-responsive" /> 
       </div> 
       <div class="text"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus. 
       </div> 
      </div> 
      <!-- Item Ends --> 
      <div class="item"> 
       <div class="image"> 
       <img src="http://weknowyourdreams.com/images/car/car-03.jpg" class="img-responsive" /> 
       </div> 
       <div class="text"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc de hominis summo bono quaeritur; Pugnant Stoici cum Peripateticis. Quid vero? Ego vero isti, inquam, permitto. Magna laus. 
       </div> 
      </div> 
      <!-- Item Ends -->   
      </div> 
     </div> 
     </div> 
    </div>

SCSS:

.item { 

    width: 33.33333%; 
    margin-bottom: 20px; 

    .image { 

    } 

    .text { 
    padding: 15px; 
    } 

} 

.grid-sizer { 
    width: 33.33333%; 
}

JS:

var $grid = $('.grid').masonry({ 
    itemSelector: '.item', 
    columnWidth: '.grid-sizer', 
    columnWidth: '33.33333%', 
    percentPosition: true, 
    gutter: 10 
    }); 

// layout Masonry after each image loads 
grid.imagesLoaded().progress(function() { 
    $grid.masonry('layout'); 
});

Что я здесь делаю неправильно?

источник

2015-12-07 Brett

@NenadVracar Неплохо, но мне нужно расстояние между ними. – Brett

http://codepen.io/anon/pen/vLEKYJ –

Спасибо, но если вы добавите границы вокруг них, вы заметите, что нет промежутков, так как мне нужен интервал между полями. Однако я придумал исправление после игры с вашей версией :) – Brett

, если запустить его с помощью стандартных JS работает

$(document).ready(function() { 

    $('.grid').masonry({ 
    itemSelector: '.item', 
    columnWidth: 160 
    }); 

});

http://masonry.desandro.com/layout.html

источник

2015-12-07 14:38:12 user2815681

33,3%, похоже, проблема ... – user2815681

Мне нужны проценты, хотя и не фиксированные. – Brett

в соответствии с руководством, это должно быть возможно; http://codepen.io/desandro/pen/JFpeg – user2815681

К сожалению, набрав в неправильном пункте. Я должен был быть где-то еще.

источник

2015-12-07 14:41:39 Franco

После проверки решения отправлено Nenad Vracar в комментариях Я начал играть с ним больше - он исправил проблему рушится, но мне нужно расстояние между ними, сохраняя 3 столбца.

Исправление, добавить/изменить ниже существующего класса CSS:

.item { 
    width: calc(33.33333333% - 10px); 
    margin-right: 10px; 

    &:nth-child(3n) { 
     margin-right: 0; 
    } 

}

Новый JS:

var $grid = $('.grid').masonry({ 
    itemSelector: '.item', 
    percentPosition: true 
}); 

// layout Masonry after each image loads 
$grid.imagesLoaded().progress(function() { 
    $grid.masonry('layout'); 
});

Единственная проблема заключается в 3 колонки не составляют точно всю ширину, они немного короткие.

источник

2015-12-07 15:15:45 Brett

Элементы масонства рушатся друг на друга

ответ

Смежные вопросы