如何定位模块以像 Pinterest 一样显示？

Question

我正在使用 jQuery 构建一个 Pinterest 类型的看板插件，我很难弄清楚他们如何定位模块。

下面是每个元素如何根据它们在 HTML 中的第 n 个值放置的片段。但这是不对的，因为 Pinterest 将转到下一行的元素定位在最短列的下方。很喜欢这里的这支笔，http://codepen.io/nikhilkumar80/pen/oxpXVK，但是我觉得很难看懂

function modPosition() {
    $this.find(".pinterest-board__mod").each(function( modIndex ) {
        $(this).css({
            position: "absolute",
            left: columnWidth * (modIndex % settings.columns) + "%",
            width: columnWidth + "%"
        });
        // ..........
    });
}
modPosition();

这是我的 CodePen link, http://codepen.io/joshuawaheed/pen/beeJKq?editors=0010

我也很难弄清楚如何设置元素的顶部位置。

我该怎么做才能完成这项工作？我已将它放在一个函数中，以便定位可以运行在文档调整大小时以及当用户单击过滤器选项以删除元素并从适当的数组附加适当的模块时再次使用它。该插件还设置为根据选项列值确定模块宽度。

提前致谢。

Answer 1

您可以通过多种方式实现它

我建议你两种方式

1) 你可以使用其中一个js模块

您可以在那里阅读更多相关信息
https://designshack.net/articles/css/masonry/

http://www.wtfdiary.com/2012/08/6-amazing-jquery-plugins-to-design.html

2) 你可以使用css规则(flexbox)

您可以在那里阅读更多相关信息

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这两种方法都有积极和消极的特点

例如，并非所有版本的浏览器都支持 fleksboks

但是 JS 对处理器的负载更大

Answer 2

我已经开始工作了。我通过以下方式解决了这个问题：

正在创建一个数组，其长度等于列数。
在数组的第一行存储模块的高度值。
遍历每个模块。
- 正在为当前模块注入最小的数组值作为 css 位置顶部。
- 将当前模块的高度与包含最小值的数组项相加。
- 通过将 100% 除以数组中最小值的索引来设置位置左侧值。

这是我写的代码，大家可以关注this link

查看和fork

function modPosition() {

    var columnsHeight = [/* Length equal to column count */], // This will be recreated on window resize.
        columnCount = /* Column count value */;


    /* Set CSS position top and left. */
    function modCssTopLeft() {

        var columnIndex = 0;

        $this.find(".pinterest-board__mod").each(function( modIndex ) {

            var topPos = 0,
                leftPos = 0;

            if ( modIndex >= columnCount) {
                topPos = Math.min.apply( Math, columnsHeight ); // Get smallest value in array.
                leftPos = 100 * columnsHeight.indexOf(topPos) / columnCount; // Set left position based on column count.
                columnsHeight[columnsHeight.indexOf(topPos)] += $(this).outerHeight(); // Change arrays smallest value by adding it with current modules height.
            }
            else {
                leftPos = 100 * (modIndex++) / columnCount; // Positioning for the modules in the first row.
            }

            $(this).css({
                position: "absolute",
                top: topPos + "px",
                left: leftPos + "%"
            });

            $(this).closest(".pinterest-board__content").css({
                height: Math.max.apply( Math, columnsHeight ) // Set height to the modules parent container.
            });

        });
    }
    modCssTopLeft();
}
modPosition();

$(window).resize(function() {
    modPosition();
});

如何定位模块以像 Pinterest 一样显示？

How do I position modules to display like Pinterest?

javascript

css

jquery

plugins

pinterest