我想用jquery构建一个砌体风格的布局和位置元素。遍历元素时,我试图重置列位置,一旦该行已成为3列宽,但是这个代码不工作,我不明白为什么jquery砌体风格网格
var rowPos = 0;
$(document).ready(function(){
$('.box').each(function(ind){
var elementWidth = $(this).width();
var elementHeight = $(this).height();
$(this).css({
left: rowPos +'px'
});
if(rowPos >= elementWidth * 2){
rowPos === 0;
}else{
rowPos += elementWidth;
}
console.log(rowPos);
});
});
这导致3列宽其他元素堆叠在第三个顶部。
CSS
body{
font-size: 20px;
}
.container{
position: relative;
}
.box{
width: 33.333%;
position: absolute;
color: #fff;
text-align: center;
box-sizing: border-box;
}
.box span{
margin-top: -1em;
position: relative;
top: 50%;
margin-top: -1em;
}
.box1, .box3, .box6, .box8{
height: 400px;
}
.box2, .box5{
height: 600px;
}
.box4, .box7{
height: 350px;
}
.container div:nth-child(odd){
background: #2a8d6f;
}
.container div:nth-child(even){
background: #5b3eac;
}
标记
<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>
请您分享您的HTML和CSS吗? – vijayP
添加了标记和css。感谢 –
只是出于好奇,如果你正在处理不同大小的'div'盒子,你将如何管理'top'位置? – vijayP