Wordpress，Vue，Internet Explorer 11

Question

因此，我的页面上的所有内容都是从AJAX调用加载的。

我认为如果我只是将我的同位素放入文档就绪函数中它会起作用但它不起作用：

$(function(){

        container = $('#content');
        container.isotope({
            itemSelector: '.tile',
            masonry: {
              columnWidth: 100
            },          
          });

    });

AJAX调用成功但没有任何内容显示，页面仍为空白。知道为什么吗？我没有错。

然而，我做了AJAX调用后，通过使用jquery .then方法设法让我的同位素工作。以下是Isotope的工作示例：

function grabNews(){

    var $content = $('#content');

    $.ajax({
        type:'GET',
        url:'json/dummy.json',
        success: function(news) {

        for(i=min; i<max; i++){
                $content.append('<div class="tile x150x100"><h3>' + news[i].headline +'</h3><br>' + news[i].text + '</div>')
                }
        }
        max=max+50;
        min=min+50; 
        },
        error: function () { alert('Loading Failed...'); 
        }
    }).then(function(){
        container = $('#content');
        container.isotope({
            itemSelector: '.tile',
            masonry: {
              columnWidth: 100
            },          
          });
    });
}

.background {
    background-color: lightblue;
    width: 1000px;
    height: auto;
    margin: auto;
    overflow: auto;
}
.tile {
    background-color: white;
    border: 1px solid black;
    overflow: hidden;
    float: left;
    margin: 10px;
    padding: 10px;
}
.x300x300 {
    height: 300px;
    width: 300px;
}
.x300x200 {
    height: 300px;
    width: 200px;
}
.x200x200 {
    height: 200px;
    width: 200px;
}
.x150x100 {
    height: 150px;
    width: 100px;   
}

<body>
    <div id="content" class="background">

    </div>
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/isotope.js"></script>
    <script src="js/controller.js"></script>
</body>

因此使用.then方法工作UNTIL我滚动到屏幕底部并进行另一个AJAX调用以加载更多内容。新内容不会进入Isotope容器。它完全被忽略了。

我确实找到了解决问题的准解决方法：

$('#content').isotope('destroy');

向

.then(function(){
        $('#content').isotope('destroy');
        container = $('#content');
        container.isotope({
            itemSelector: '.tile',
            masonry: {
              columnWidth: 100
            },          
          });
    });

我把它放在我的jquery .then函数中，同位素容器更新并识别新对象。好成功！然后我的浏览器滚动回顶部！为什么呢？

如何在进行ajax调用时向下滚动并更新我的同位素容器？

请帮忙！

Answer 1

我将举一个简短的例子来实现同位素js在ajax调用时的工作并附加到你的同位素容器上。

首先为isotop js添加实时CDN：

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

让我们假设我们有一个div类，让我们说“isotop”：例如：

    <div class="isotop">
        ................
    </div>

现在这个isotop div中可能有一些内容，类可以说，“isotop-item”：例如：

    <div class="isotop">
        <div class="isotop-item">
            <p>Item 1</p>
        </div>
        <div class="isotop-item">
            <p>Item 2</p>
        </div>
        <div class="isotop-item">
            <p>Item 3</p>
        </div>
    </div>

我们还有一个按钮，如果单击该按钮，则内容应该在isotop div中加载。例如：

    <div class="btn_load">
        <a href="btn btn-info">Load More</a>
    </div>

现在，如果你想附加从ajax调用中获得的内容，那么它就像你想要的一样简单：

<script type="text/javascript">
    $(document).ready(function(){
        $('.btn_load').on('click',function(){
            var $grid = $('.isotop').isotope({
                itemSelector: '.isotop-item',
            });
            $.ajax({
                url : '<?php echo site_url('Items/addMoreItems'); ?>',
                type : 'post',
                data : 'offset='+offset,
                success: function(res){
                    var $items = $(res);
                        $grid.append($items)
                        .isotope('appended',$items);
                    }
               });
        });
    });
</script>

注意：成功的res必须是：

    <div class="isotop-item">
        <p>Item 3</p>
    </div>
    <div class="isotop-item">
        <p>Item 4</p>
    </div>

肯定你会得到所有同位素特性的同位素含量。

Answer 2

这个问题已经解决了我的假设。

无论如何，您可以在AJAX succes回调中告诉同位素关于您的新项目，请参阅函数下的isotope documentation - ＆gt;附加

Answer 3

更新

Wordpress，Vue，Internet Explorer 11

示例添加了延迟加载代码。

我刚刚发现了另一种解决方法：我创建了一个具有正确大小的canvas元素，而不是仅加载和放置图像。此画布用作比例计算的占位符。图像绝对位于顶部。

注意：您需要知道图像的大小/比率。就我的wordpress而言，它们嵌入在json调用中。

它甚至可以与Internet Explorer 11一起使用。

<figure>
    <canvas 
      :width="post.image.sizes['medium-width']"
      :height="post.image.sizes['medium-height']"
    ></canvas>
    <img
      class="lazyload"
      :src="post.image.sizes.thumbnail"
      :data-src="post.image.sizes.medium"
      :alt="post.image.alt"
      :width="post.image.sizes['medium-width']"
      :height="post.image.sizes['medium-height']"
    >
</figure>

CSS：

figure,canvas { position: relative; }
img { position: absolute; top:0; left:0;  }

在加载新的AJAX时，Isotope容器不会定位新对象，而是重叠旧对象

3 个答案:

Wordpress，Vue，Internet Explorer 11