主页 / 问题 / 772744
Accepted
YourDeveloper
Asked:2020-01-19 14:03:57 +0000 UTC2020-01-19 14:03:57 +0000 UTC

为什么砌体网格有时会粘在一起？

  • 772

有元素 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>

javascript

2 个回答

  1. Best Answer

    在构建网格之前添加了加载图像 - 结果相同。

    但是如果我们通过 setTimeout(function() {$MasGrid.masonry();}, 50) 更新网格，也就是图片加载后 0.05 秒，那么它应该就起来了，不知道有没有这是否是一个很好的解决方案:)

    • 1

  2. 添加包装器$(window).bind('load', function() {...});

    • 0

相关问题