javascript - 如何通过 jquery 或 javascript 将元素捕捉到网格

Question

有一些元素有class='snap'

我想在体内找到这些元素。然后snap和resize元素以适应网格Jquery。

When?

• 文件准备好了。
• 窗口已调整大小。

Note:

• 网格单元的大小是10px
• 元素的内容可以不同。
• 元素最多可以向下移动 1 个单元格大小。（不允许向上）。
• 由于响应式元素，通过指定宽度和高度来捕捉元素是不正确的。

参见 JsFiddle

任何想法或帮助将不胜感激。

JsFiddle 更新：.content去掉了in 的宽度CSS，可以是not specified.

Answer 1

offset你可以做的，这只是一个可以完善的想法，是获取.snapdiv 并删除所有边距。然后你捕捉到下一行（右行和下一行）：

var Content = {
    snapElement: function(element){
        offset = element.offset();
        element.css('left', (Math.ceil(offset.left/10)*10)+'px');
        element.css('top', (Math.ceil(offset.top/10)*10)+'px');
        element.css('margin', '0');
    },
    snapElements: function(){
        var elements = $("body").find(".snap");
        elements.each(function(){
            Content.snapElement($(this));
        });     
    }
}

您还必须使您的.snapdiv 相对：

.snap {position:relative;}

演示

您也可以保留边距，但您必须将它们减去leftand top。

编辑：处理的更复杂的演示width