同位素砌体网格问题

Question

我正在开发一个 NodeJS 项目，使用 Firebase 作为后端，NodeJs 作为服务器端，EJS + HTML + JS + CSS 作为前端。

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

方法一：

我有 40 张图片。

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

这是一张图片：

这里是sn-ps的代码：

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 并将项目添加到网格中。

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

这是一张图片

这里是sn-p的代码：

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) 创建一个处理从后端检索数据并将对象传递到另一个函数的方法，该函数使用同位素特定的辅助方法将 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 在加载图像后将项目添加到网格中，并且 'appended' 方法在元素添加到网格后布置网格。