Javascript 砌块未与jQuery对齐_Javascript_Jquery_Html_Css_Jquery Masonry

Javascript 砌块未与jQuery对齐

javascript jquery html css

Javascript 砌块未与jQuery对齐,javascript,jquery,html,css,jquery-masonry,Javascript,Jquery,Html,Css,Jquery Masonry,我是一个学习如何编码的学生我在尝试使用砌体插件对齐块时遇到问题我试图使每个块（.item）的高度和宽度相同，但我不确定如何正确地执行，因为我使用的是百分比。如果它是一个更固定的值，比如像素，那就更容易了我使用的是David DeSandro编写的jQuery1.9.1，CSS在meyerweb上重置 HTML： <body> <div class="wrapper"> <div class="gridSizer"></div

我是一个学习如何编码的学生

我在尝试使用砌体插件对齐块时遇到问题

我试图使每个块（.item）的高度和宽度相同，但我不确定如何正确地执行，因为我使用的是百分比。如果它是一个更固定的值，比如像素，那就更容易了

我使用的是David DeSandro编写的jQuery1.9.1，CSS在meyerweb上重置

HTML：

<body>
    <div class="wrapper">
        <div class="gridSizer"></div>
        <!-- FIRST ROW -->
        <section class="item" style="background:limeGreen">Everything is 125px in height and width</section>
        <section class="item" style="background:green">&nbsp;</section>
        <section class="item" style="background:olive">&nbsp;</section>
        <section class="item h2" style="background:lime">Only this block is 250px in height (.h2 class), but the aqua coloured box is not being pushed down.</section>
        <!-- SECOND ROW -->
        <section class="item" style="background:blue">&nbsp;</section>
        <section class="item" style="background:navy">&nbsp;</section>
        <section class="item" style="background:teal">&nbsp;</section>
        <section class="item" style="background:aqua">&nbsp;</section>
        <!-- THIRD ROW -->
        <section class="item" style="background:magenta">&nbsp;</section>
        <section class="item w2 h2" style="background:hotPink">This block is 250px in height and width (.w2 and .h2 classes)</section>
        <section class="item" style="background:deepPink">&nbsp;</section>
        <section class="item w2" style="background:lightCoral">If the width is increased (.w2 class), elements are still pushed</section>
        <section class="item">No background color assigned to this block</section>
        <section class="item" style="background:violet">&nbsp;</section>
    </div>
</body>

JavaScript/jQuery：

var $container = $('.wrapper');

$container.masonry({
    columnWidth: '.gridSizer',
    itemSelector: '.item'
});
$('.item').css('height', $('.item').width());
$('.item.h2').css('height', $('.item').width() * 2);

以下是我的问题：

如果我能得到任何帮助，我将不胜感激。谢谢

应在确定所有图元的大小后初始化砌体

将您的JavaScript更改为：

var $container = $('.wrapper');

//these should come before call to masonry()
$('.item').css('height', $('.item').width());
$('.item.h2').css('height', $('.item').width() * 2);

$container.masonry({
    columnWidth: '.gridSizer',
    itemSelector: '.item'
});

请参阅。

谢谢！我认为我应该在砌体生效后（在选择了柱宽和itemSelector之后）最后确定元素的大小。

var $container = $('.wrapper');

//these should come before call to masonry()
$('.item').css('height', $('.item').width());
$('.item.h2').css('height', $('.item').width() * 2);

$container.masonry({
    columnWidth: '.gridSizer',
    itemSelector: '.item'
});