Question

我已经做了很多研究，但是还没有找到解决我问题的方法。我正在用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的Vanilla 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格正确显示，而最后3格不正确。每次加载新图块时，最后一批都无法正确显示。

此行为链接到oNewsMsnry.layout（）。没有此调用，所有附加的AJAX都以0％的高度和相同的高度堆叠。

有人有解决此问题的想法吗？

非常感谢所有帮助

PS：我一直在使用Vanilla JS，因为该项目已从那开始，并且我习惯以这种方式进行编码！

Answer 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>

这样，当布局所需的所有信息都可用时，我就可以使用布局。

砌体-AJAX附加图块未显示

1 个答案: