Question

尝试使用Jquery创建一个简单的砌体样式网格，但仍然遇到一个问题，出现了奇怪的边缘，我无法弄清楚为什么。有几次尝试有类似的结果。这是最新的

JS

$(document).ready(function () {

var $boxes = $('.box');
var rowPos = 0;
var counter = 0;
$boxes.each(function (ind) {

    var boxWidth = $(this).width();
    var upperBoxHeight = 0;
    var upperBoxPosition = 0;
    var top = 0;

    rowPos = counter * boxWidth;

    counter++;

    if(counter >= 3){
        counter = 0;
    }
    if(ind >= 3){
        upperBoxHeight = $boxes.eq(ind - 3).height();
        upperBoxPosition = $boxes.eq(ind -3).position().top;
        top = upperBoxHeight + upperBoxPosition;        }



    $(this).css({
        left: rowPos,
        top : top
    });
 });
});

css

.container{
width: 85%;
margin: auto;
position: relative;
}

.box{
width: 33.3333%;
position: absolute;

}

.box1, .box5{
background: #2baf63;
height: 500px;    
}
.box2, .box6{
background: #623ec5;
height: 650px;    
}
.box3, .box7{
background: #3e81c5;
 height: 300px;    
}
.box4, .box8{
background: #9fba43;
height: 400px;    
}

标记

<!doctype html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-3.1.0.min.js"></script>

</head>
<body>

    <div class="container">
        <div class="box box1"><span>box 1</span></div>
        <div class="box box2"><span>box 2</span></div>
        <div class="box box3"><span>box 3</span></div>
        <div class="box box4"><span>box 4</span></div>
        <div class="box box5"><span>box 5</span></div>
        <div class="box box6"><span>box 6</span></div>
        <div class="box box7"><span>box 7</span></div>
        <div class="box box8"><span>box 8</span></div>

    </div>
    <script src="js/functions.js"></script>
 </body>
</html>

奇怪的是，如果我打开检查器并刷新页面，所有盒子都会锁定到他们想要的位置。如果我关闭检查员并再次刷新，问题就会出现。

然后打开检查员

jquery砌体样式网格问题

0 个答案: