Question

我想创建一个网站，其中的文章像拼图（post grid）一样合在一起。我使用了这个codepen的源代码： https://codepen.io/maximelafarie/full/bVXMBR/

当我把这个codepen放在index.php中时，一切正常。

但我在index.php中使用AJAX来从fetch.php中获取文章。

这就是index.php从fetch.php获取文章的方式：

        <script type="text/javascript">


            $(document).ready(function(){
                document.getElementById("result_no").value = 0;
                //var val = document.getElementById("result_no").value;
                    var val =0;

                $.ajax({
                  type: 'post',
                  url: 'fetch.php',
                  data: {
                    getresult: val
                  },
                  context: this,
                  success: function(response) {
                    var content = document.getElementById("result_para");
                    content.innerHTML = content.innerHTML + response;

                    document.getElementById("result_no").value = Number(val) + 15;
                  }
                });
            });

                </script>


                <div id="content">
                    <div id="result_para" class="site__wrapper">

                    </div>
                </div>

另外，在index.php的末尾，还有一些JS库/函数：

    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js'></script>
 <script  src="gridViewer/index.js"></script>

这是index.js：

(function() {
  var $grid = $('.grid').imagesLoaded(function() {
    $('.site__wrapper').masonry({
      itemSelector: '.grid'
    });
  });
})();

从研究开始，我注意到这个问题，可能是在index.php的JS上，并不适用于来自fetch.php的文章。我认为需要有一个方法等待fetch.php的图像加载，然后在它们上面应用JS。

这是来自index.php的文章（从fetch.php获取文章时）：

<div id="result_para" class="site__wrapper" style="position: relative; height: 18.75px;">               
      <div class="grid">
        <div class="card">
          <div class="card__image">
                <article class="card-60">           
                </article>
            </div>
        </div>
    </div>

  <div class="grid">
    <div class="card">
      <div class="card__image">
            <article class="card-60">
                <div class="flex-content">
                    <div style="padding-bottom:2em;"></div>
                </div>
            </article>
        </div>
    </div>
  </div>            
</div>

当我只从index.php获取文章时（不要从fetch.php获取它们），我得到的文章是（这就是我想要它的方式，也是fetch.php）：

<div id="result_para" class="site__wrapper" style="position: relative; height: 18.75px;">               
      <div class="grid" style="position: absolute; left: 0px; top: 24px;">
        <div class="card">
          <div class="card__image">
                <article class="card-60">           
                </article>
            </div>
        </div>
    </div>

  <div class="grid" style="position: absolute; left: 304px; top: 24px;">
    <div class="card">
      <div class="card__image">
            <article class="card-60">
                <div class="flex-content">
                    <div style="padding-bottom:2em;"></div>
                </div>
            </article>
        </div>
    </div>
  </div>            
</div>

由于某些原因，当我从fetch.php获取文章时，类网格没有位置：绝对值，左侧和顶部值。

感谢您的帮助。

Answer 1

index.js中的函数在启动时被触发，而您的fectched文章尚未到达（异步）。您可以尝试在结果出现时将结果应用于结果div，如下所示：

            $.ajax({
              type: 'post',
              url: 'fetch.php',
              data: {
                getresult: val
              },
              context: this,
              success: function(response) {
                var content = document.getElementById("result_para");
                content.innerHTML = content.innerHTML + response;

                //Edit from comments, try to remove the imagesLoaded part:
                //$('#result_para .grid').imagesLoaded(function() {
                    $('.site__wrapper').masonry({
                        itemSelector: '.grid'
                    });
                //});

                document.getElementById("result_no").value = Number(val) + 15;
              }
            });

（注意：如果您在获取带有fetch的文章之前没有要在页面中处理的图像，则可以删除启动时触发的原始函数，否则您可以保留它）

Javascript不适用于ajax输出

1 个答案: