Почему Masonry сетка иногда слипается?

146
20 января 2018, 02:11

Есть элементы prntscr.com/i2hiuo , но иногда они прогружаются вот так prntscr.com/i2hj7z , при обновлении страниц без сброса кэша (обычным f5) всё становится как надо, но почему изначально не работает ? При ресайзе, так же сетка становится нормальной.

var $MasGrid = $('.snb-mas-grid');  
$MasGrid.masonry({ // 
  itemSelector: '.snb-mas-item', 
  columnWidth: '.snb-mas-item', 
  horizontalOrder: true, 
  percentPosition: true  
});
<div class="snb-mas-grid row"> 
				 
  <div class="snb-mas-item col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
 
    <div class="snb-item"> 
 
      <div class="snb-img"> 
        <img src="img/ri-1.jpg" alt="img"> 
      </div> 
 
      <div class="snb-descr-block"> 
 
        <div class="snb-d-top-cont"> 
          <span class="snb-b-date-1">18</span> 
          <span class="snb-b-date-2">Ноября</span> 
          <a href="#" class="gray-btn"><span class="no-tran">Гаджеты</span></a> 
        </div> 
 
        <div class="snb-d-main-cont"> 
          <a href="#" class="snb-dmc-a">Новый эксклюзивный образ:  
          Хекстек-Ког'Мао</a> 
          <p class="snb-dmc-p">Хекстек-Ког'Мао принесет в ваш дом радость  
          и огневую мощь. Образ уже доступен за  
          10 самоцветов.</p> 
        </div> 
 
      </div> 
    </div> 
  </div> 
  <div class="snb-mas-item col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
 
    <div class="snb-item"> 
 
      <div class="snb-img"> 
        <img src="img/ri-2.jpg" alt="img"> 
      </div> 
 
      <div class="snb-descr-block"> 
 
        <div class="snb-d-top-cont"> 
          <span class="snb-b-date-1">18</span> 
          <span class="snb-b-date-2">Ноября</span> 
          <a href="#" class="gray-btn"><span class="no-tran">Гаджеты</span></a> 
        </div> 
 
        <div class="snb-d-main-cont"> 
          <a href="#" class="snb-dmc-a">Олимпийский комитет против игр <br> 
          с насилием, взрывами <br> 
          и убийствами</a> 
          <p class="snb-dmc-p">Новый комментарий по этому вопросу  
          от президента олимпийского комитета 
          Томаса Баха.</p> 
        </div> 
 
      </div> 
    </div> 
  </div> 
  <div class="snb-mas-item col-lg-4 col-md-4 col-sm-6 col-xs-12"> 
 
    <div class="snb-item"> 
 
      <div class="snb-img"> 
        <img src="img/ri-3.jpg" alt="img"> 
      </div> 
 
      <div class="snb-descr-block"> 
 
        <div class="snb-d-top-cont"> 
          <span class="snb-b-date-1">18</span> 
          <span class="snb-b-date-2">Ноября</span> 
          <a href="#" class="gray-btn"><span class="no-tran">Гаджеты</span></a> 
        </div> 
 
        <div class="snb-d-main-cont"> 
          <a href="#" class="snb-dmc-a">Карточная Dota может выйти  
          и в физическом виде</a> 
          <p class="snb-dmc-p">Valve оформила марку для физической  
          карточной игры/набора игральных карт 
          Dota 2.</p> 
        </div> 
 
      </div> 
    </div> 
  </div> 
 </div>

Answer 1

Добавил загрузку картинок до построения сетки - результат тот же.

Но если дописать обновлении сетки через setTimeout(function() {$MasGrid.masonry();}, 50) то есть спустя 0.05 секунды после загрузки картинок, то она встает как надо, не знаю хорошее это решение или нет :)

READ ALSO
Обновление ссылки на картинку по клику JQuery

Обновление ссылки на картинку по клику JQuery

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

196
Вызов функции по клику

Вызов функции по клику

Добрый деньИмеется функция, которая вызывает при нажатии на div content

206
Поменять значение disabled в input

Поменять значение disabled в input

Есть две радиокнопки:

209