How to organize mosaic DIVs (with different heights)? [duplicate]

Navigation
2

Help with organizing divs with float

Post page with different heights, to present projects and news on a web page.

example of the post list

I try to make a grid where projects are shown in three columns, but sorted from left to right in order of organization rows in Z. So far I have tried two methods and each has its problems.

I tried to do it with css, but I think the solution has to be with java script. I would greatly appreciate some light. I've been trying to do something like that for a long time.

1 Div float left

This would be the best solution, but when the divs have different heights they become disorganized. One solution would be to give all divs the same height, but with this I do not get the effect I want. As a mosaic gallery, or something similar. It creates structures like the one shown in the previous image. 

article{
  background:#ccc; 
  width:33%; 
  float:left; padding:10px;
  box-sizing: border-box;
  background-clip:content-box;
  text-align: center;}
<article> <h3>1</h3> <p>div altura 1 linea</p></article>
<article> <h3>2</h3> <p>div altura 1 linea</p></article>
<article> <h3>3</h3> <p><br> 3<br> lineas</p></article>
<article> <h3>4</h3><br> <p>3 lineas<br> Me gustaría que este div se pegara al (1) superior, no al anterior</p></article>
<article> <h3>5</h3><br><p> lineas<br>lineas</p></article>
<article> <h3>6</h3> <br><p> lineas</p></article>
<article> <h3>7</h3> <br><p> En este caso el alineamiento no queda a la izquierda</p> </article>
<article> <h3>8</h3> <br><p> lineas</p></article>
<article> <h3>9</h3> <br><p> lineas</p></article>

2 Multiple columns

This is the solution that I am currently using, Visually it is what I am looking for, but the order is wrong, since it orders it by columns and in many cases post as # 3 end at the end of the page, so it does not I show in chronological order, not as I pretend. In addition to this we must add that with the responsive the columns vary and the order also. 

$('.grid').masonry({
  // options
  itemSelector: '.grid-item'
});
.contenedor {
  column-count: 3;
  column-gap: 20px;
}
article {
  break-inside: avoid;
  background: #ccc;
  width: 100%;
  float: left;
  padding: 10px;
  box-sizing: border-box;
  background-clip: content-box;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script>
<div class="contenedor">
<article> <h3>1</h3> <p>div altura 1 linea</p></article>
<article> <h3>2</h3> <p>div altura 1 linea</p></article>
<article> <h3>3</h3> <p><br> 3<br> lineas</p></article>
<article> <h3>4</h3><br> <p>3 lineas<br> Me gustaría que este div se pegara al (1) </p></article>
<article> <h3>5</h3><br><p> lineas<br>lineas</p></article>
<article> <h3>6</h3> <br><p> lineas</p></article>
<article> <h3>7</h3> <br><p> En este caso el alineamiento no queda a la izquierda</p> </article>
<article> <h3>8</h3> <br><p> lineas</p></article>
<article> <h3>9</h3> <br><p> lineas</p></article>
  
</div>

3 Masonry 

$('.grid').masonry({
  // options
  itemSelector: '.grid-item'
});
@import url('https://fonts.googleapis.com/css?family=Roboto:100');
body{background:#333;font-family: 'Roboto', sans-serif; font-weight:bold; font-size:19px;}
h3{ font-size:35px; font-weight:100; margin-left:10px; color:#fff;}
article {
  break-inside: avoid;
  background: #d9db68;
  width: 33%;
  float: left;
  padding: 10px 7px;
  box-sizing: border-box;
  background-clip: content-box;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script>

<body>
  <h3>Masonry</h3>
  <div class="grid">
    <article class="grid-item"> <h3>1</h3> <p>div altura 1 linea</p></article>
    <article class="grid-item"> <h3>2</h3> <p>div altura 1 linea</p></article>
    <article class="grid-item"> <h3>3</h3> <p><br> 3<br> lineas</p></article>
    <article class="grid-item"> <h3>4</h3><br> <p>3 lineas<br> Me gustaría que este div se pegara al (1)     </p></article>
    <article class="grid-item"> <h3>5</h3><br><p> lineas<br>lineas</p></article>
    <article class="grid-item"> <h3>6</h3> <br><p> lineas</p></article>
    <article class="grid-item"> <h3>7</h3> <br><p> En este caso el alineamiento no queda a la izquierda</p> </article>
    <article class="grid-item"> <h3>8</h3> <br><p> lineas</p></article>
    <article class="grid-item"> <h3>9</h3> <br><p> lineas</p></article>
  
  </div>
  
</body>
    
asked by beweb 04.02.2017 в 21:26
source

1 answer

0

There is a library specialized in the problem you have is called isotope . An alternative would be to use this library link , I'll give you an example: 

// external js: isotope.pkgd.js

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 80
  }
});

$('.append-button').on( 'click', function() {
  // create new item elements
  var $items = getItemElement();
  // append elements to container
  $grid.append( $items )
    // add and lay out newly appended elements
    .isotope( 'appended', $items );
});


// make <div class="grid-item grid-item--width# grid-item--height#" />
function getItemElement() {
  var $item = $('<div class="grid-item"></div>');
  // add width and height class
  var wRand = Math.random();
  var hRand = Math.random();
  var widthClass = wRand > 0.85 ? 'grid-item--width3' : wRand > 0.7 ? 'grid-item--width2' : '';
  var heightClass = hRand > 0.85 ? 'grid-item--height3' : hRand > 0.5 ? 'grid-item--height2' : '';
  $item.addClass( widthClass ).addClass( heightClass );
  return $item;
}
    * { box-sizing: border-box; }

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #DDD;
  max-width: 1200px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-item {
  float: left;
  width: 80px;
  height: 80px;
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.grid-item--width2 { width: 160px; }
.grid-item--height2 { height: 160px; }

.grid-item--width3 { width: 240px; }
.grid-item--height3 { height: 240px; }

button { font-size: 20px; }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.js'></script>

<h1>Isotope</h1>

<p><button class="append-button">insertar</button></p>

<div class="grid">
  
</div>

Another help that I would give you would be to line up with left and right 

#contenedor{
  width:328px;
  display:inline-block;
}
article{
  width:100px;
  height:150px;
  background-color:#CCC;
 margin:2px;
  text-align:center;
height:auto;
}

.uno{float:left;}
.dos{float:right;}
<div id="contenedor">
<article class="uno"> <h3>1</h3> <p>div altura 1 linea</p></article>
<article class="uno"> <h3>2</h3> <p>div altura 1 linea</p></article>
<article class="uno"> <h3>3</h3> <p><br> 3<br> lineas</p></article>

<article class="uno"> <h3>4</h3><br> <p>3 lineas<br> Me gustaría que este div </p></article>
<article class="uno"> <h3>5</h3><br><p> lineas<br>lineas</p></article>
<article class="dos"> <h3>6</h3> <br><p> lineas</p></article>
<article class="dos"> <h3>7</h3> <br><p> En este caso el alineamiento no queda a la izquierda</p> </article>
<article class="dos"> <h3>8</h3> <br><p> lineas</p></article>
<article class="uno"> <h3>9</h3> <br><p> lineas</p></article>
<article class="dos"> <h3>10</h3> <br><p> lineas</p></article>
<article class="uno"> <h3>11</h3> <br><p> lineas</p></article>
</div>
    
answered by 04.02.2017 в 22:10
Global Angular Information 2 TypeScript [closed] RecyclerView creates a ghost record when deleting