How to make a column layout responsive with js?

Navigation
3

I need to create a responsive masonry layout with pure js. I've tried it in many ways, but most columns are not responsive, and CSS arranges the numbering from top to bottom.

Responsivenesswouldbe:

  • Onmobile:haveacolumnhorizontally.
  • Ontablets:havetwocolumnshorizontally.
  • OnComputers:havethreecolumnshorizontally.

I'musingthiscode,butIcannotleavethelayoutresponsiveorchangethewidthswithoutdestroyingthelayout.

function renderGrid() {
    var blocks = document.getElementById("grid_container").children;
    var pad = 10,
        cols = 3,
        newleft, newtop;
    for (var i = 1; i < blocks.length; i++) {
        if (i % cols == 0) {
            newtop = (blocks[i - cols].offsetTop + blocks[i - cols].offsetHeight) + pad;
            blocks[i].style.top = newtop + "px";
        } else {
            if (blocks[i - cols]) {
                newtop = (blocks[i - cols].offsetTop + blocks[i - cols].offsetHeight) + pad;
                blocks[i].style.top = newtop + "px";
            }
            newleft = (blocks[i - 1].offsetLeft + blocks[i - 1].offsetWidth) + pad;
            blocks[i].style.left = newleft + "px";
        }
    }
}
window.addEventListener("load", renderGrid, false);
window.addEventListener("resize", renderGrid, false);
div#grid_container {
    width: 900px;
    margin: 0px auto;
    height: 860px;
    border: #999 1px dashed;
}
div#grid_container > div {
    position: absolute;
    width: 291px;
    border: #000 1px solid;
}
div#grid_container > div:nth-child(2n+0) {
    background: #FFDC64;
}
div#grid_container > div:nth-child(2n+1) {
    background: #FEC910;
}
div#grid_container > div > div {
    padding: 20px;
    font-size: 27px;
    color: #D9A800;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head> 
<body>
<div id="grid_container">
  <div style="height:140px;"> <div>1</div> </div>
  <div style="height:200px;"> <div>2</div> </div>
  <div style="height:120px;"> <div>3</div> </div>
  <div style="height:180px;"> <div>4</div> </div>
  <div style="height:150px;"> <div>5</div> </div>
  <div style="height:160px;"> <div>6</div> </div>
  <div style="height:180px;"> <div>7</div> </div>
  <div style="height:170px;"> <div>8</div> </div>
  <div style="height:160px;"> <div>9</div> </div>
  <div style="height:180px;"> <div>10</div> </div>
  <div style="height:150px;"> <div>11</div> </div>
  <div style="height:160px;"> <div>12</div> </div>
  <div style="height:130px;"> <div>13</div> </div>
  <div style="height:140px;"> <div>14</div> </div>
  <div style="height:210px;"> <div>15</div> </div>
</div>
</body> 
</html>
    
asked by anonymous 06.01.2017 / 19:15

1 answer

0

You can only do this with CSS: 

.grid_container{
  width: 100%;
  column-count: 4;
}

.child{
  display:block;
  min-height: 110px;
  width: 100%;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
}

JSFIDDLE: link

    
06.01.2017 / 21:16
Better EntityManager definition How to do flash animation type a scratch card?