砌体 - 未显示 AJAX 附加图块答案

【问题标题】：Masonry - AJAX Appended tiles not displayed砌体 - 未显示 AJAX 附加图块
【发布时间】：2018-08-24 09:14:03
【问题描述】：

我已经做了很多研究，但还没有找到解决问题的方法。我正在用 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>

在第一次 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% 且高度相同。

但在第二次 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 个 div 可以正确显示，而最后 3 个则不正确。每次我加载新图块时，最后一批都无法正确显示。

此行为与 oNewsMsnry.layout() 相关联。如果没有这个调用，所有附加的 AJAX 都以 0% 和相同的高度堆叠。

有人有解决这个问题的想法吗？

感谢大家的帮助

PS：我一直使用 vanilla JS，因为项目就是这样开始的，而且我有这样编码的习惯！

【问题讨论】：

标签： ajax layout masonry

【解决方案1】：

好的，在发布我得到的问题和想法之后。

这种行为让我认为问题出在调用 .layout() 时数据的“未知”维度，这就是为什么下一次调用，当数据已知时，显示工作。这可能是因为我们在这里采用了适合大小的图块配置。

我已经为批处理的最后一个元素添加了一个用于视频的 onloadeddata 或用于 img 事件侦听器的 onload，以便在最后一个元素的数据传输完成时调用 .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>

这样，当布局所需的所有信息都可用时，布局就可以工作了。

【讨论】：