Multiple images in one message, but all in one container

Question

I started logic in one of my projects that I am working on. This is not WordPress. I want to display multiple images, maybe 1,2,3 .... up to 10 in one container div, which will be loaded from the backend system. This should appear in a single view similar to the one shown below.

I tried to arrange the images in a div container without JavaScript. I am new to jQuery and find it difficult, but don't know how to do this.

Codepen Example here

I know this is possible using only jQuery.

If you need more clarification, please comment, I will update my question.

**

Note. A Facebook post has several images in one view. I am trying to draw the same conclusion.

**

Answer 1

, jQuery.Masonry. :

• .
• .

$(document).ready(function () {
  $('.grid').masonry({
    // options
    itemSelector: '.grid-item',
    columnWidth: 200
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js"></script>
<div class="grid">
  <div class="grid-item"><img src="https://shechive.files.wordpress.com/2012/06/cute-cartoons-21.jpg"/>
    <img src="https://s-media-cache-ak0.pinimg.com/236x/ac/bb/d4/acbbd49b22b8c556979418f6618a35fd.jpg"/>
    <img src="http://hdwallpaper1080.com/wp-content/uploads/2015/02/178714_cartoon-jerry-tom-wallpaper-cartoons-wallpapers_1920x1080.jpg"/></div>
  <div class="grid-item"><img src="https://shechive.files.wordpress.com/2012/06/cute-cartoons-21.jpg"/>
    <img src="https://s-media-cache-ak0.pinimg.com/236x/ac/bb/d4/acbbd49b22b8c556979418f6618a35fd.jpg"/>
    <img src="http://hdwallpaper1080.com/wp-content/uploads/2015/02/178714_cartoon-jerry-tom-wallpaper-cartoons-wallpapers_1920x1080.jpg"/></div>
  <div class="grid-item"><img src="https://shechive.files.wordpress.com/2012/06/cute-cartoons-21.jpg"/>
    <img src="https://s-media-cache-ak0.pinimg.com/236x/ac/bb/d4/acbbd49b22b8c556979418f6618a35fd.jpg"/>
    <img src="http://hdwallpaper1080.com/wp-content/uploads/2015/02/178714_cartoon-jerry-tom-wallpaper-cartoons-wallpapers_1920x1080.jpg"/></div>
  ...
</div>

Hide result

Answer 2

.post-img {
  float: left;
  width: 40%;
  max-height: 400px;
  -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
} 

( pinterest), css, : http://jsfiddle.net/jalbertbowdenii/7Chkz/ : http://masonry.desandro.com/

http://jsfiddle.net/ffkdurw9/ js, , . , 1 img , 2 3 3

EDIT 2 css- ie8, Microsoft ... , :))

EDIT 3 js, , , . jQuery.each() jQuery .

Answer 3

should use widthand heightin img tag(for Fix)

Example

.post-img { 
   float: left;
   width: 40%;
   max-height: 400px;
   background-color: red; //custom
   padding: 10px; // custom
   margin: 10px; // custom  
 }

.post-img img {
  max-width: 100px; // custom
  max-height: 100px; // custom
}

Answer 4

Use floatfor each image.

#image-container img{
  float:left; 
  max-width:33.33%
}

Run codeHide result