Question

我正在创建一个使用Meteor的应用，使用alethes:pages包进行分页，使用Bootstrap 3进行样式。在主页面中，我使用无限滚动显示多个项目（每行3个）。

问题出现在一个项目高于他的邻居项目时，使下一行有一个空闲空间并向右浮动一个项目，而不是出现在较高项目下面。在这里你可以看到问题：

One of the items is floated to the right, showing a free space

我为分页包使用的项目制作了一个HTML模板。因此，对于图像中显示的示例，生成的代码将是以下代码：

<div class="col-md-10 col-lg-10 col-md-offset-2 col-lg-offset-2">
    <div class="pagesCont">
        <div class="col-md-4 col-lg-4">
            <div class="col-md-12 col-lg-12 well">
                <h4 class="break-word">
                    <a href="#">Item 1</a>
                </h4>
                <a href="#">
                    <img src="/cfs/files/images_publications/jvtQWo4KSziMXCryh/300x340.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&amp;store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
                </a>
                <h5 class="col-md-8 col-lg-8 break-word">
                    <a href="#">Category</a>
                </h5>
                <h4 class="col-md-4 col-lg-4 text-right"> 1 €</h4>
                <div>
                    <div class="col-md-12 col-lg-12">
                        <a href="#" class="break-word">UserName UserLastName</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-4">
            <div class="col-md-12 col-lg-12 well">
                <h4 class="break-word">
                    <a href="#">Item 2</a>
                </h4>
                <a href="#">
                    <img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&amp;store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
                </a>
                <h5 class="col-md-8 col-lg-8 break-word">
                    <a href="#">Category</a>
                </h5>
                <h4 class="col-md-4 col-lg-4 text-right"> 2 €</h4>
                <div>
                    <div class="col-md-12 col-lg-12">
                        <a href="#" class="break-word">UserName UserLastName</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-4">
            <div class="col-md-12 col-lg-12 well">
                <h4 class="break-word">
                    <a href="#">Item 3</a>
                </h4>
                <a href="#">
                    <img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&amp;store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
                </a>
                <h5 class="col-md-8 col-lg-8 break-word">
                    <a href="#">Category</a>
                </h5>
                <h4 class="col-md-4 col-lg-4 text-right"> 3 €</h4>
                <div>
                    <div class="col-md-12 col-lg-12">
                        <a href="#" class="break-word">UserName UserLastName</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-4">
            <div class="col-md-12 col-lg-12 well">
                <h4 class="break-word">
                    <a href="#">Item 4</a>
                </h4>
                <a href="#">
                    <img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&amp;store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
                </a>
                <h5 class="col-md-8 col-lg-8 break-word">
                    <a href="#">Category</a>
                </h5>
                <h4 class="col-md-4 col-lg-4 text-right"> 4 €</h4>
                <div>
                    <div class="col-md-12 col-lg-12">
                        <a href="#" class="break-word">UserName UserLastName</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-4">
            <div class="col-md-12 col-lg-12 well">
                <h4 class="break-word">
                    <a href="#">Item 5</a>
                </h4>
                <a href="#">
                    <img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&amp;store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
                </a>
                <h5 class="col-md-8 col-lg-8 break-word">
                    <a href="#">Category</a>
                </h5>
                <h4 class="col-md-4 col-lg-4 text-right"> 5 €</h4>
                <div>
                    <div class="col-md-12 col-lg-12">
                        <a href="#" class="break-word">UserName UserLastName</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-4">
            <div class="col-md-12 col-lg-12 well">
                <h4 class="break-word">
                    <a href="#">Item 6</a>
                </h4>
                <a href="#">
                    <img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&amp;store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
                </a>
                <h5 class="col-md-8 col-lg-8 break-word">
                    <a href="#">Category</a>
                </h5>
                <h4 class="col-md-4 col-lg-4 text-right"> 6 €</h4>
                <div>
                    <div class="col-md-12 col-lg-12">
                        <a href="#" class="break-word">UserName UserLastName</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-4">
            <div class="col-md-12 col-lg-12 well">
                <h4 class="break-word">
                    <a href="#">Item 7</a>
                </h4>
                <a href="#">
                    <img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&amp;store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
                </a>
                <h5 class="col-md-8 col-lg-8 break-word">
                    <a href="#">Category</a>
                </h5>
                <h4 class="col-md-4 col-lg-4 text-right"> 7 €</h4>
                <div>
                    <div class="col-md-12 col-lg-12">
                        <a href="#" class="break-word">UserName UserLastName</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-4">
            <div class="col-md-12 col-lg-12 well">
                <h4 class="break-word">
                    <a href="#">Item 8</a>
                </h4>
                <a href="#">
                    <img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&amp;store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
                </a>
                <h5 class="col-md-8 col-lg-8 break-word">
                    <a href="#">Category</a>
                </h5>
                <h4 class="col-md-4 col-lg-4 text-right"> 8 €</h4>
                <div>
                    <div class="col-md-12 col-lg-12">
                        <a href="#" class="break-word">UserName UserLastName</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-4">
            <div class="col-md-12 col-lg-12 well">
                <h4 class="break-word">
                    <a href="#">Item 9</a>
                </h4>
                <a href="#">
                    <img src="/cfs/files/images_publications/woTuL4hS6SkSYRSb3/300x300.png?token=eyJhdXRoVG9rZW4iOiJsQU55dkttNWNxR0twVjJDWmpad1kzMHhOYS1IMGhTNDdiV0t5Vjd4M1lDIn0%3D&amp;store=images_publications" alt="NO VA" class="img-responsive img-thumbnail">
                </a>
                <h5 class="col-md-8 col-lg-8 break-word">
                    <a href="#">Category</a>
                </h5>
                <h4 class="col-md-4 col-lg-4 text-right"> 9 €</h4>
                <div>
                    <div class="col-md-12 col-lg-12">
                        <a href="#" class="break-word">UserName UserLastName</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我可以让这些项目具有相同的高度，但我想拥有不同的图像大小和多行文字，而不会在项目中留下空闲空间。

我想要此网站中显示的项目列表：http://es.wallapop.com/

但该列表的问题是使用绝对位置以便在彼此之下显示项目。我想避免绝对的立场，因为我认为与之前提到的软件包集成起来并不容易。

我不知道Bootstrap 3中是否可以使用绝对位置。

Answer 1

这与我相信的流星或分页没什么关系。

您正在寻找的可能是使用bootstrap实现masonyjs。像这样的布局可以变得非常有趣和棘手。我肯定会调查那个组合。

Answer 2

在评论中进行了对话：

经过大量研究和测试后，我终于Masonry与alethes:pages包完美配合。我知道，在我的上一次评论中，我说我放弃了这一点，但经过一段时间以我自制的无限卷轴，我意识到它并没有对mongodb的变化作出反应，它是静态的。我不想花更多的时间在那......

在向您展示制作魔法的代码之前，您必须考虑以下事项：

使用Masonry的最佳方式是使用Isotope，至少对我来说就是这种情况。我建议你安装这个流星包：isotope:isotope
您还需要ImagesLoadead库：iamkevingreen:imagesloaded
alethes:pages包使用document.body.offsetHeight DOM属性作为总页面高度，以便在滚动时加载新项目。如果您使用Bootstrap该属性可能不代表总页面高度，那么无论您在infiniteTrigger选项中设置什么，每个滚动都可以添加新项目。解决此问题的方法是在关闭正文之前添加clearfix：

    <template name="MasterLayout">
        ...
        {{> yield}}
        <div class="clearfix"></div>
    </template>

Masonry使用的商品容器必须padding: 0（至少左右）才能使用Bootstrap正确显示。

现在，让我们看看代码。

这是服务器代码：

Items =  new Meteor.Collection('items');

ItemsPagination = new Meteor.Pagination(Items, {
    templateName: "ItemsList",
    itemTemplate: "Item",
    divWrapper: 'container',
    infinite: true,
    infiniteTrigger: 0.8,
    pageSizeLimit: 1512,
    dataMargin: 0,
    perPage: 21
});

这些是分页对象使用的模板：

<template name="ItemsList">
    {{> pages}}
</template>

<template name="Item">

    <div class="ms-item col-md-4 col-lg-4">

        <div class="well clearfix">

            <h4>{{name}}</h4>

            <!-- Using CFS package in a global helper to retrieve the item image -->
            {{#with getPhoto photo}}
                <a href="#">
                    <img src="{{url store='images_items'}}" alt="No photo" class="img-responsive img-thumbnail" />
                </a>
            {{/with}}

            <!-- Using a global helper to get the item category -->
            {{#with getCategory category}}
                <h5 class="col-md-8 col-lg-8"> <a href="#">{{name}}</a> </h5>
            {{/with}}

            <h4 class="col-md-4 col-lg-4 text-right"> {{price}} €</h4>

            <div>
                <div class="col-md-12 col-lg-12">
                    <!-- Using a global helper to get the item owner -->
                    {{#with getUser owner}}
                        {{#with profile}}
                            <a href="#" class="break-word">
                                {{ [first-name] }} {{ [last-name] }}
                            </a>
                        {{/with}} 
                    {{/with}}
                </div>
            </div>
        </div>
    </div>

</template>

这些是ItemList模板使用的代码：

var observer, container;

Template.ItemList.onRendered(function() {

    container = $('#container');

    //Load Isotope with Masonry
    container.imagesLoaded(function() {
        container.isotope({
            layoutMode: 'masonry',
            itemSelector: '.ms-item',
            transitionDuration: '0.1s'
        });

        container.isotope('layout');
    });

    //Using a MutationObserver to readapt the layout when a new item is added
    observer = new MutationObserver(function(mutations) {
        container.imagesLoaded(function() {
            container.isotope('reloadItems').isotope('layout').isotope();
        });
    });

    //Adding the MutationObserver to the items container
    observer.observe(container.get(0), {
        attributes: false, 
        childList: true, 
        characterData: false
    });

});

最后，这是模板的用法：

<template name="myTemplate">
    <div class="col-md-12 col-lg-12">
        {{> ItemsList}}
    </div>
</template>

我是怎么做到的。希望这有助于某人;）

修改

我找到了一种更好的方法来做这一切（我的意思是没有MutationObserver）。相反，我使用了Meteor提供的_uihooks对象：

Template.ItemList.onRendered(function() { var container = $('#container'); //Load Isotope with Masonry container.imagesLoaded(function() { container.isotope({ layoutMode: 'masonry', itemSelector: '.ms-item', transitionDuration: '0.1s' }).isotope('layout').isotope(); }); //Using uihooks instead of MutationObserver container[0]._uihooks = { insertElement: function(node, next) { $(node).insertBefore(next); container.imagesLoaded(function() { container.isotope('reloadItems').isotope('layout').isotope(); }); }, removeElement: function(node, next) { $(node).remove(); container.imagesLoaded(function() { container.isotope('reloadItems').isotope('layout').isotope(); }); } }; });

如何在Bootstrap 3中将多个项目对齐在一起？

2 个答案: