Question

我使用带有多个浮动divs的引导程序获得了布局。

我想使用divs检索JavaScript之间的空格。我不知道我怎么能这样做。见下图。

一张图片说1000字;）

我已经用上面的布局创建了一个小提琴，我会把它粘贴在这里，这样你可以随意玩它。

.page-container {
    background: #ededed;
    padding: 40px 0;
}

.column {
    padding: 15px;
    background-color: white;
    box-shadow: 1px 1px 3px #ccc;
}

[class^="col-"] {
    margin-bottom: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="page-container">
<div class="container">
    <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="column">
            <h2>
        Floating element #1
        </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
        </p>
        <p>
        Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
        </p>
        </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="column">
            <h2>
        Floating element #2
        </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
        </p>
        </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
       <div class="column">
        <h2>
        Floating element #3
        </h2>
        <p>
            Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
        </p>
        <p>
        Fusce a velit et justo porttitor sollicitudin a a velit. Praesent ultrices arcu a sodales ultricies. Etiam cursus mattis dapibus. Fusce vulputate commodo pretium. Suspendisse a orci vitae ipsum interdum dapibus a quis velit. Proin euismod, lectus id euismod semper, tellus nunc luctus dui, consectetur venenatis erat mi eu dolor. Nunc eleifend semper lacus, at hendrerit massa. Praesent ac magna at lacus commodo faucibus eu sit amet magna. Donec pellentesque felis et leo interdum dignissim. Sed sit amet sapien ac quam auctor semper quis ut nibh. Vivamus consectetur, ipsum luctus semper viverra, sem arcu sagittis mauris, a interdum odio sapien in augue.
        </p>
        <p>
        Nam ut bibendum urna, sed congue neque. Nunc a nunc venenatis, porttitor odio vitae, finibus est. Suspendisse quis purus a diam aliquam ullamcorper eu sed dolor. Etiam ac eros eget nisl pretium lobortis. Nulla convallis id nunc eget efficitur. Morbi vel elementum justo. Phasellus et egestas quam. Cras eu tristique urna. Cras ac justo efficitur, consectetur eros et, tincidunt nulla. Quisque et cursus ipsum. Ut tincidunt, purus et tempor fermentum, nulla diam suscipit ex, non sodales eros nunc vel ante. Duis quis justo quam. Sed imperdiet lorem et blandit pretium. Etiam elit dui, tristique et vehicula vitae, venenatis et augue.
        </p>
       </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="column">
        <h2>
        Floating element #4
        </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
        </p>
        <p>
        Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
        </p>
        </div>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
        <div class="column">
        <h2>
        Floating element #4
        </h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
        </p>
        </div>
    </div>
</div>
</div>

我正在尝试获取这些像素，并使用div向上移动基础JavaScript。我知道我可以使用像masonry这样的东西。但我不能让那些在我的申请中工作。

有谁知道我该怎么做？（哦，使用jQuery没问题）

Answer 1

尝试以下方法之一：

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeigh t包括高度和垂直填充。

offsetHeight包括高度，垂直填充和垂直边框。

scrollHeight包含所包含文档的高度（在滚动时大于高度），垂直填充和垂直边框。

使用JQuery

$('#someDiv').height();
$('#someDiv').width();

Answer 2

获取第一个元素x，y cordinates（例如Retrieve the position (X,Y) of an HTML element）
获取第一个元素的高度和宽度（例如marco gomes回答）
获取第四个元素＆x; y cordinates
计算： 第四个x pos减去（第一个＆x; s x +高度）=空白空间 因为它的宽度与其他宽度相同，所以你有一个宽度。

如果需要动态查找间隙，可以循环所有div并将它们放在列组中（借助x pos）。然后，您在上面为每个组执行当前和下一个顺序元素（他们应该顺序正确）。如果垂直差异高于设定规则，则可以假设您有差距。

使用JavaScript在浮动div之间获取空间？

2 个答案: