同位素砌体网格问题

Question

我正在使用Firebase作为后端，NodeJ作为服务器端以及EJS + HTML + JS + CSS作为前端的NodeJS项目中进行工作。

在主屏幕上，我有一个3列的砖砌网格，用于显示我要显示的图像。 类似于pinterest。 在网格底部，我还有一个“添加更多”按钮，该按钮向api发送请求以检索更多要显示在页面上的图像。

方法1：

我有40张图片。

在我的路线中，我将从Firebase检索数据，然后使用数据渲染ejs视图。 我想加载前20张图像。 优点：它可以让我在页面上的所有内容具有正确的样式，并且可以与网格样式一起使用； 如果图像高度不同，则网格布局会相应地调整内容。 缺点：我不知道如何处理分页来以5的间隔加载其余图像。

这是一张图片：

以下是代码片段：

NodeJS：

router.get('/home', function(req, res { firObj.database().ref('igrushi/content').orderByKey().limitToLast(14).once('value', function (snapshot) {
    res.status(200).render('igrushiexperience/index', { 
        title: "",
        data: snapshot.val(),
    });
});

ejs =>

<div class="portfolio portfolio-gutter portfolio-style-2 portfolio-masonry portfolio-not-full portfolio-3-column">
                        <% var keys; %>
                        <% var lastKey; %>
                        <% if (data != null) { %>
                            <% keys = Object.keys(data); %>
                            <% console.log(keys); %>
                            <% lastKey = keys[0]; %>
                            <% keys.forEach(function(child) { %>
                            <% var value = data[child] %>
                            <div class="portfolio-item cat-1 cat-3 ">
                                <div class="portfolio-item-content">
                                    <div class="item-thumbnail">
                                        <img src="<%= value.post_image %>" alt="" >
                                    </div>
                                </div>
                            </div>
                            <% }); %>
                        <% }; %>
                    </div>
                    <div class="pagination-area">
                        <div class="load-more text-center">
                            <a class="button" href="/events/igrushiexperience/pagination/<%= lastKey %>">view more<i class="ti-reload"></i></a>
                        </div>
                    </div>`

方法2：我有40张图片。

在我的路线中，我将渲染ejs视图，我的EJS将包含一个XMLHttpRequest到另一个获取数据的节点js端点。 提取数据后，我使用appendChild创建DIV，并将项目添加到网格中。

优点：这种方法可以使我的分页请求成功执行，并以5个项目间隔继续获取和呈现数据。 缺点：CSS样式不成立，并且网格无法针对不同的高度进行调整。

这是一张图片

这是代码片段：

html =>

<div class="portfolio-fullwidth">
                <div class="portfolio-content">
                    <div id="gallery" class="portfolio portfolio-gutter portfolio-style-2 portfolio-masonry portfolio-full portfolio-3-column">
                    </div>
                    <div class="pagination-area">
                        <div class="load-more text-center">
                            <a class="button" onClick="pagination(this)">view more<i class="ti-reload"></i></a>
                        </div>
                    </div>
                </div>
            </div>

js：

<script>
    var keys;
    function retrieveData() {
        var request = new XMLHttpRequest();
        request.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var posts = JSON.parse(this.responseText);
                keys = Object.keys(posts); 
                keys.forEach(function(id) {
                    var post = posts[id];
                    addItemToGallery(post);
                });
                console.log(keys);
            };
        };
        request.open("GET", "/events/igrushiexperience/retrievePosts", true);
        request.send();
    }

    function pagination(e) {
        var keyForPagination;
        if (keys.length > 0) {
            keyForPagination = keys[keys.length - 1];
        } else {
            return retrieveData();
        }
        console.log(keyForPagination);

        var request = new XMLHttpRequest();
        request.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var posts = JSON.parse(this.responseText);
                var paginationKeys = Object.keys(posts); 
                paginationKeys.forEach(function(id) {
                    if (!keys.includes(id)) {
                        keys.push(id);
                        var post = posts[id];
                        addItemToGallery(post);
                    }
                });
                console.log("New Array: ", keys);
            };
        };
        request.open("GET", "/events/igrushiexperience/pagination/"+ keyForPagination, true);
        request.send();
    }

    function addItemToGallery(post) {
        var divOne = document.createElement("div");
        divOne.className = "portfolio-item cat-1 cat-3";
        var divTwo = document.createElement("div");
        divTwo.className = "portfolio-item-content";
        var divThree = document.createElement("div");
        divThree.className = "item-thumbnail";
        var image = document.createElement("img");
        image.src = post.post_image;

        divThree.appendChild(image);
        divTwo.appendChild(divThree);
        divOne.appendChild(divTwo);

        document.getElementById("gallery").appendChild(divOne);
    }

    retrieveData();
</script>

请帮助

Answer 1

好的，经过一番研究，我意识到该项目正在做一些事情：

1）提出错误的问题2）使用同位素（ https://isotope.metafizzy.co/ ）渲染砖石网格3）不正确地添加元素4）附加项目后不重新渲染网格。

所以要解决这个问题，我=>

1）查阅了文档-在这里阅读是至关重要的，大声笑-我看到该库有很多很棒的帮助程序方法，可以帮助将项目动态添加到网格。 2）在窗口加载时初始化网格并将其引用存储到变量中，以便以后可以重用。 3）创建了一种方法，该方法处理从后端检索数据并将对象传递给另一个函数，该函数使用Issope特定的辅助方法将html项附加到网格。 下面是方法。

var $grid;
var keyForPagination;
var httpRequestInQueue = false;

$(window).load(function () {
    $grid = $('.portfolio-masonry');
    $grid.imagesLoaded(function() {
       $grid.isotope({
           itemSelector: '.portfolio-item',
           percentPosition: true,
       });
    });
 });

function addItemToGallery(post) {
    var $item = $('<div class="portfolio-item cat-1 cat-3 "><div class="portfolio-item-content"><div class="item-thumbnail"><img src="'+post.post_image+'" alt="" ></div></div></div>');
    $grid.imagesLoaded(function() {
        $grid.append($item);
        $grid.isotope('appended', $item);
    });
 }

根据文档，在将图像加载后，append将项目添加到网格中，而在将元素添加到网格中之后，“ append”方法将网格布局。