javascript - 同位素砌体网格问题

Question

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

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

方法一:

我有 40 张图片。

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

这是一张图片:

代码片段如下:

Node :

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

方法二:我有 40 张图片。

在我的 route ，我将呈现 ejs View ，我的 EJS 将包含一个 XMLHttpRequest 到另一个获取数据的 Node 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) 创建了一个处理从后端检索数据并将对象传递到另一个函数的方法，该函数使用 Isotope 特定的辅助方法将 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”方法在元素添加到网格后布局网格。