jquery сетка в стиле каменной кладки

Я пытаюсь создать макет стиля каменной кладки и элемент положения с помощью jquery. при переборе элементов я пытаюсь сбросить положение столбца, когда строка становится шириной в 3 столбца, но этот код не работает, и я не понимаю, почему

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>

jquery css grid masonry
person Phillip Phillop    schedule 20.09.2016    source источник
comment
не могли бы вы поделиться своим HTML и CSS тоже?   -  person vijayP    schedule 20.09.2016
comment
Добавлены разметка и css. спасибо   -  person Phillip Phillop    schedule 20.09.2016
comment
просто из любопытства, как вы собираетесь управлять top позицией, если вы имеете дело с коробками div разных размеров?   -  person vijayP    schedule 20.09.2016
comment
просто работаю над этим сейчас. я думаю, вычислив высоту элементов, расположенных над ним (индексация относительно текущей итерации)? как получится. Я знаю о плагине masonry, но хотел попробовать его сам.   -  person Phillip Phillop    schedule 20.09.2016
comment
я нашел это очень интересным. Только успел это сделать. Добавление кода в качестве ответа. Посмотрите, получите ли вы какую-либо помощь с этим   -  person vijayP    schedule 20.09.2016
comment
пробовал и это, но все те же поля.   -  person Phillip Phillop    schedule 20.09.2016

Ответы (2)


arrow_upward
1
arrow_downward

Я думаю, это должно быть

if(rowPos >= elementWidth * 2){
    rowPos = 0; //not rowPos === 0;

}else{
    rowPos += elementWidth;
}
person xszaboj    schedule 20.09.2016

arrow_upward
0
arrow_downward

Пожалуйста, взгляните на этот подход. Также может управлять верхней позицией коробки:

var rowPos = 0;
var counter = 0;
$(document).ready(function() {

  $('.box').each(function(ind) {

    var elementWidth = $(this).width();
    var elementHeight = $(this).height();
    var height = 0;
    var top = 0;
    if (ind >= 3) {
      var topBox = $('.box').eq(ind - 3);
      height = topBox.height();
      top = topBox.position().top;
    }
    $(this).css({
      left: rowPos + 'px',
      top: (height + top) + 'px'
    });


    if (counter >= 2) {
      rowPos = 0;
      counter = 0;
    } else {
      rowPos += elementWidth;
      counter++;
    }
  });

});
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: 450px;
}
.box4,
.box7,
.box9 {
  height: 350px;
}
.container div:nth-child(odd) {
  background: #2a8d6f;
}
.container div:nth-child(even) {
  background: #5b3eac;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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 class="box box9"><span>box 9</span>
  </div>
</div>

person vijayP    schedule 20.09.2016
comment
да, это было направление, в котором я шел, хотя гораздо менее красноречиво, лол, похоже, это дает какие-то странные поля между столбцами. хотя они, кажется, исчезают при переключении инспектора... странно - person Phillip Phillop; 20.09.2016