Масонство - AJAX Добавленные плитки не отображаются - PullRequest
Новая
       15

Масонство - AJAX Добавленные плитки не отображаются

0 голосов
/ 24 августа 2018

Я провел несколько исследований, но не нашел решения по моей проблеме.Я строю сетку из кирпича с php, это великолепно.

Проблема возникает, когда я хочу загрузить больше изображений с помощью AJAX.Плитка добавлена, но макет не обновлен правильно!

Вот моя функция инициализации: 

function initNewsMasonry()
{
  oNewsGrid = document.querySelector('.grid');
  oNewsMsnry = new Masonry( oNewsGrid, {
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true
  });
}

Я следовал учебному пособию https://codepen.io/desandro/pen/nhekz для ванильного JS.вот код для вставки тайлов: 

xmlhttp.onreadystatechange = function() 
{
  if (this.readyState == 4 && this.status == 200) 
  {
    var myObj = JSON.parse(this.responseText);
    if(myObj.length > 0)
    {
      var fragment = document.createDocumentFragment();
      var elems = [];
      for(iIndex=0; iIndex<myObj.length; iIndex++)
      {
        var element = document.createElement('div');
        element.className = myObj[iIndex]["class"];
        element.innerHTML = myObj[iIndex]["innerHTML"];

        fragment.appendChild(element);
        elems.push(element);
      }
      oNewsGrid.appendChild(fragment);
      oNewsMsnry.appended(elems);

      // doesn't change the result with reloadItems()
      oNewsMsnry.reloadItems();
      oNewsMsnry.layout();
    }
  }
};

А это CSS: 

.grid {
  max-width: 2000px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-item {
  float: left;
}

.grid-item,
.grid-sizer {
  width:33.2%;
}

img,
video {
  width:100%;
  height:100%;
}

.grid-item .newsTxt {
  opacity: 0;
  height:94%;
  position: absolute;
  left: 3%;
  right: 3%;
  top: 3%;
  color: #000000;
  background: #ffffff;
  vertical-align: top;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

вот сгенерированный HTML-код - после загрузки страницы: 

<div class="grid" style="position: relative; height: 659.344px;">
  <div class="grid-sizer"></div>
  <div class="grid-item" style="position: absolute; left: 0%; top: 0px;">
    <img src="./Images/News/125/500x500/refe_03.png">
    <div id="newsTxt-125" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">14.08.2018 // CiLab</font> <br><br> super 0</font></div>
  </div>
  <div class="grid-item" style="position: absolute; left: 33.1823%; top: 0px;">
    <img src="./Images/News/126/500x500/proj_07.png">
    <div id="newsTxt-126" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">13.08.2018 // CiLab</font> <br><br> super 1</font></div>
  </div>
  <div class="grid-item" style="position: absolute; left: 66.3646%; top: 0px;">
    <img src="./Images/News/127/500x500/refe_06.png">
    <div id="newsTxt-127" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">12.08.2018 // CiLab</font> <br><br> super 2</font></div>
  </div>
</div>

Здесь после 1-й загрузки AJAX (например, 3 плитки для каждой загрузки): 

<div class="grid" style="position: relative; height: 659.344px;">
  <div class="grid-sizer"></div>
  <div class="grid-item" style="position: absolute; left: 0%; top: 0px;">
    <img src="./Images/News/125/500x500/refe_03.png">
    <div id="newsTxt-125" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">14.08.2018 // CiLab</font> <br><br> super 0</font></div>
  </div>
  <div class="grid-item" style="position: absolute; left: 33.1823%; top: 0px;">
    <img src="./Images/News/126/500x500/proj_07.png">
    <div id="newsTxt-126" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">13.08.2018 // CiLab</font> <br><br> super 1</font></div>
  </div>
  <div class="grid-item" style="position: absolute; left: 66.3646%; top: 0px;">
    <img src="./Images/News/127/500x500/refe_06.png">
    <div id="newsTxt-127" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">12.08.2018 // CiLab</font> <br><br> super 2</font></div>
  </div>
  <div class="grid-item" style="position: absolute; left: 0%; top: 659px;">
    <img src="./Images/News/128/500x500/photo_youtube.jpg">
    <div id="newsTxt-128" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">11.08.2018 // CiLab</font> <br><br> super 3</font></div>
  </div>
  <div class="grid-item" style="position: absolute; left: 0%; top: 659px;">
    <img src="./Images/News/129/500x500/proj_07.png">
    <div id="newsTxt-129" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">10.08.2018 // CiLab</font> <br><br> super 4</font></div>
  </div>
  <div class="grid-item" style="position: absolute; left: 0%; top: 659px;">
    <img src="./Images/News/130/500x500/refe_03.png">
    <div id="newsTxt-130" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">09.08.2018 // CiLab</font> <br><br> super 5</font></div>
  </div>
</div>

Вы можете видеть, что все 3 (или любое количество) новых плитки расположены на 0% и на одной высоте.

Но при 2-й загрузке AJAX: 

<div class="grid" style="position: relative; height: 659.344px;">
  <div class="grid-sizer"></div>
  //////
  ///////// same divs as initial page load /////////
  //////
  <div class="grid-item" style="position: absolute; left: 0%; top: 659px;">
    <img src="./Images/News/128/500x500/photo_youtube.jpg">
    <div id="newsTxt-128" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">11.08.2018 // CiLab</font> <br><br> super 3</font></div>
  </div>
  <div class="grid-item" style="position: absolute; left: 33.1823%; top: 659px;">
    <img src="./Images/News/129/500x500/proj_07.png">
    <div id="newsTxt-129" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">10.08.2018 // CiLab</font> <br><br> super 4</font></div>
  </div>
  <div class="grid-item" style="position: absolute; left: 66.3646%; top: 659px;">
    <img src="./Images/News/130/500x500/refe_03.png">
    <div id="newsTxt-130" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">09.08.2018 // CiLab</font> <br><br> super 5</font></div>
  </div>
    <div class="grid-item" style="position: absolute; left: 0%; top: 1318px;">
    <img src="./Images/News/131/500x500/proj_06.png">
    <div id="newsTxt-131" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">08.08.2018 // CiLab</font> <br><br> super 6</font></div>
  </div>
  <div class="grid-item" style="position: absolute; left: 0%; top: 1318px;">
    <img src="./Images/News/133/500x500/photo_youtube.jpg">
    <div id="newsTxt-133" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">07.08.2018 // CiLab</font> <br><br> super 7</font></div>
  </div>
  <div class="grid-item" style="position: absolute; left: 0%; top: 1318px;">
    <img src="./Images/News/136/500x500/proj_05.png">
    <div id="newsTxt-136" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">06.08.2018 // CiLab</font> <br><br> super 8</font></div>
  </div>
</div>

Теперь 4-6 делений отображаются правильно, а последние 3 - нет.каждый раз, когда я загружаю новые плитки, последняя партия не отображается правильно.

Это поведение связано с oNewsMsnry.layout ().без этого вызова все добавленные AJAX укладываются в 0% и имеют одинаковую высоту.

Кто-нибудь знает, как решить эту проблему?

Большое спасибо за помощь

PS: я остался с vanilla JS, потому что проект начался так, и у меня есть привычка кодировать таким образом!

1 Ответ

0 голосов
/ 24 августа 2018

Хорошо, так что сразу после публикации вопроса я получил и идея.

Такое поведение заставило меня задуматься о том, что проблема была в «неизвестном» измерении данных в момент вызова .layout (), и поэтому при следующем вызове, когда данные известны, дисплей работает. Вероятно, это происходит потому, что мы находимся здесь в конфигурации размера плитки, подходящей для размера.

Я добавил onloadeddata для видео или onload для прослушивателей событий img к последнему элементу пакета для вызова .layout (), когда передача данных последнего элемента, если закончено: 

<div class="grid-item" style="position: absolute; left: 66.3776%; top: 1952px;">
  <img src="./Images/News/139/500x500/photo_youtube.jpg" onload="msryLayout();">
  <div id="newsTxt-139" class="newsTxt" onclick="showDetails(this);"><font style="font-size:1.5em;"><font style="font-family:Euclide_Square_Bold;">03.08.2018 // CiLab</font> <br><br> super 11</font></div>
</div>

таким образом я заставил работать макет, когда была доступна вся информация, необходимая для макета.

...