-1

I want to make a layout like the attached image.Blocks will render on the page in the same order number.

For example :- block(1) will show first after then block (2) and so on...

Design Image for question

Coding Enthusiast
  • 3,865
  • 1
  • 27
  • 50
Ashish
  • 174
  • 2
  • 13

2 Answers2

0

Masonry is a popular JS library to handle this: http://masonry.desandro.com/

Assuming your HTML looks like this:

<div id="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <!-- More items... -->
</div>

The JS would look like this:

var msnry = new Masonry('#container', {
    columnWidth: 200,
    itemSelector: '.item'
});

Or if you prefer jQuery:

$('#container').masonry({
    columnWidth: 200,
    itemSelector: '.item'
});
Ian Drake
  • 737
  • 4
  • 7
  • @itdrake91...please check my question.I want to do with the help of twitter bootstrap not with other framework.. – Ashish Jun 19 '15 at 18:49
  • Bootstrap does not provide any built-in method for doing this. In case this wasn't clear from my answer, I meant that you can/should use Masonry _with_ Bootstrap. Here's a quote directly from the official Bootstrap documentation: "If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as Masonry, Isotope, or Salvattore." [(source)](http://getbootstrap.com/components/#thumbnails) – Ian Drake Jun 19 '15 at 20:21
  • Please see the answer above.Its showing the same design that I wanted. – Ashish Jun 20 '15 at 00:52
  • Yes, Coding Enthusiast's answer looks good. However, I normally see the `col-*` classes wrapped inside `row` classes (which would probably break that layout). This may not be an official requirement in Bootstrap, just the way I've always seen it. As long as it doesn't affect the mobile responsiveness, then I'm sure it's fine. – Ian Drake Jun 22 '15 at 18:27
  • ...I have used the combination of correct answer html and my logic to fulfill the requirement.In php I use the bootstrap and php code like this way:- $row=2; $col=4; $i=50; for($i=1;$i<=$col;$i++){ echo '
    '; for($j=$i;$j<=$count;$j=$j+4){ $filter_id= $array_id[$j-1]; echo '
    '; echo "
    "; echo $image_html = '' . $image_alt . ''; echo '
    ';
     – Ashish Jul 13 '15 at 17:23
0

ah! this one below works perfectly. Check this bootply i quickly did. 

<div class="col-sm-3">
  <div class="col-sm-12">1</div>
  <div class="col-sm-12">5</div>
</div>
<div class="col-sm-3">
    <div class="col-sm-12">2</div>
    <div class="col-sm-12">6</div>
</div>
<div class="col-sm-3">
    <div class="col-sm-12">3</div>
    <div class="col-sm-12">7</div>
</div>
<div class="col-sm-3">
    <div class="col-sm-12">4</div>
    <div class="col-sm-12">8</div>
</div>

I know you will want to push and pull once you want to rearrange the order of the div in extra small screen so this is a link to push and pull very well answered on Stack Overflow.

Community
  • 1
  • 1
Coding Enthusiast
  • 3,865
  • 1
  • 27
  • 50
  • @Coding...Situation is your rendering html (1,5,2,6,3,7,4,8) in this order .but I want to render html (1,2,3,4,5,6,7,8) in this order.Any helps – Ashish Jun 19 '15 at 19:20