Ajax Loader
HTML 
<h1>Pinterest like Waterfall Design purely in css</h1>
1
<h1>Pinterest like Waterfall Design purely in css</h1>
2
 
3
<div id="wrapper">
4
  <div id="columns">
5
    <div class="pin">
6
      <img src="http://wtfcontent.com/img/132667200473.jpg" />
7
      <p>
8
      Angry Math NErds
9
      </p>
10
      <p>timestamp</p>
11
    </div>
12
  
13
    <div class="pin">
14
      <img src="http://randommization.com/wp-content/uploads/2013/10/People-You-See-at-Nerd-Conventions-2.jpg" />
15
      <p>
16
      convallis.
17
      </p>
18
      <p>timestamp</p>
19
    </div>
20
21
    <div class="pin">
22
        Donec a fermentum nisi.
23
      </p>
24
    </div>
25
26
    <div class="pin">
27
    </div>
28
29
    <div class="pin">
30
      <img src="http://naggeria.net/blog/wp-content/gallery/4all/super_nerd_galaxy_by_jjar01.jpg" />
31
      <p>
32
        Nullam eget lectus augue. Donec eu sem sit amet ligula
33
        faucibus suscipit. Suspendisse rutrum turpis quis nunc
34
        convallis quis aliquam mauris suscipit.
35
      </p>
36
    </div>
37
38
    <div class="pin">
39
      <img src="http://randommization.com/wp-content/uploads/2013/10/People-You-See-at-Nerd-Conventions-2.jpg" />
40
      <p>
41
        Donec a fermentum nisi. Integer dolor est, commodo ut
42
        sagittis vitae, egestas at augue.
43
      </p>
44
    </div>
45
46
    <div class="pin">
47
      <img src="http://th07.deviantart.net/fs71/PRE/f/2010/063/5/5/Angry_Video_Games_and_the_Nerd_by_Tabascofanatikerin.jpg" />
48
      <p>
49
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
50
        Sed feugiat consectetur pellentesque. Nam ac elit risus,
51
        ac blandit dui. Duis rutrum porta tortor ut convallis.
52
        Duis rutrum porta tortor ut convallis.
53
      </p>
54
    </div>
55
56
    <div class="pin">
57
      <img src="http://naggeria.net/blog/wp-content/gallery/4all/super_nerd_galaxy_by_jjar01.jpg" />
58
      <p>
59
        Nullam eget lectus augue. Donec eu sem sit amet ligula
60
        faucibus suscipit. Suspendisse rutrum turpis quis nunc
61
        convallis quis aliquam mauris suscipit.
62
        Duis rutrum porta tortor ut convallis.
63
      </p>
64
    </div>
65
66
    <div class="pin">
67
      <img src="https://i.chzbgr.com/maxW500/4542641408/h1C8C994A/" />
68
      <p>
69
        Nullam eget lectus augue.
70
      </p>
71
    </div>
72
73
    <div class="pin">
74
      <p>
75
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
76
        Sed feugiat consectetur pellentesque.
77
      </p>
78
    </div>
79
80
    <div class="pin">
81
      <img src="http://www.tap2game.com/wp-content/uploads/2013/09/AngryNerds414X468.png" />
82
      <p>
83
        Donec a fermentum nisi. Integer dolor est, commodo ut
84
        sagittis vitae, egestas at augue. Suspendisse id nulla
85
        ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
86
      </p>
87
    </div>
88
89
    <div class="pin">
90
      <img src="http://naggeria.net/blog/wp-content/gallery/4all/super_nerd_galaxy_by_jjar01.jpg" />
91
      <p>
92
        Donec a fermentum nisi. Integer dolor est, commodo ut
93
        sagittis vitae, egestas at augue. Suspendisse id nulla
94
        ac urna vestibulum mattis.
95
      </p>
96
    </div>
97
98
    <div class="pin">
99
      <img src="http://randommization.com/wp-content/uploads/2013/10/People-You-See-at-Nerd-Conventions-2.jpg" />
100
      <p>
101
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
102
        Sed feugiat consectetur pellentesque. Nam ac elit risus,
103
        ac blandit dui. Duis rutrum porta tortor ut convallis.
104
      </p>
105
    </div>
106
107
    <div class="pin">
108
      <img src="http://www.tap2game.com/wp-content/uploads/2013/09/AngryNerds414X468.png" />
109
      <p>
110
        Donec a fermentum nisi. Integer dolor est, commodo ut
111
        sagittis vitae, egestas at augue. Suspendisse id nulla
112
        ac urna vestibulum mattis.
113
      </p>
114
    </div>
115
116
    <div class="pin">
117
      <img src="http://www.mcdinternuts.com/images/cards/leaderboard/angryNerds.png" />
118
      <p>
119
        Donec a fermentum nisi. Integer dolor est, commodo ut
120
        sagittis vitae, egestas at augue. Suspendisse id nulla
121
        ac urna vestibulum mattis.
122
      </p>
123
    </div>
124
125
    <div class="pin">
126
      <img src="http://th07.deviantart.net/fs71/PRE/f/2010/063/5/5/Angry_Video_Games_and_the_Nerd_by_Tabascofanatikerin.jpg" />
127
      <p>
128
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
129
        Sed feugiat consectetur pellentesque. Nam ac elit risus,
130
        ac blandit dui. Duis rutrum porta tortor ut convallis.
131
      </p>
132
    </div>
133
134
  <div class="pin">
135
      <img src="http://static.fjcdn.com/pictures/Angry+Nerds+.+Just+Nelson+playing+Angry+Nerds+enjoy+it+D_120319_3602982.jpg" />
136
      <p>
137
        Nullam eget lectus augue.
138
      </p>
139
    </div>
140
141
  <div class="pin">
142
      <img src="http://www.mcdinternuts.com/images/cards/leaderboard/angryNerds.png" />
143
      <p>
144
        Nullam eget lectus augue.
145
      </p>
146
    </div>
147
  </div>
148
</div>
 
CSS 
body {
1
body {
2
  background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
3
}
4
 
5
h1 {
6
  margin-left: 10px;
7
}
8
 
9
#wrapper {
10
  width: 90%;
11
  max-width: 1100px;
12
  min-width: 800px;
13
  margin: 50px auto;
14
}
15
 
16
#columns {
17
  -webkit-column-count: 3;
18
  -webkit-column-gap: 10px;
19
  -webkit-column-fill: auto;
20
  -moz-column-count: 3;
21
  -moz-column-gap: 10px;
22
  -moz-column-fill: auto;
23
  column-count: 3;
24
  column-gap: 15px;
25
  column-fill: auto;
26
}
27
 
28
.pin {
29
  display: inline-block;
30
  background: #FEFEFE;
31
  border: 2px solid #FAFAFA;
32
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
33
  margin: 0 2px 15px;
34
  -webkit-column-break-inside: avoid;
35
  -moz-column-break-inside: avoid;
36
  column-break-inside: avoid;
37
  padding: 15px;
38
  padding-bottom: 5px;
39
  background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
40
  opacity: 1;
41
42
  -webkit-transition: all .2s ease;
43
  -moz-transition: all .2s ease;
44
  -o-transition: all .2s ease;
45
  transition: all .2s ease;
46
}
47
 
48
.pin:first-child {
49
  width: 100%;
50
}
51
 
52
.pin img {
53
  width: 100%;
54
  border-bottom: 1px solid #ccc;
55
  padding-bottom: 15px;
56
  margin-bottom: 5px;
57
}
58
 
59
.pin p {
60
  font: 12px/18px Arial, sans-serif;
61
  color: #333;
62
  margin: 0;
63
}
64
 
65
@media (min-width: 960px) {
66
  #columns {
67
    -webkit-column-count: 4;
68
    -moz-column-count: 4;
69
    column-count: 4;
70
  }
71
}
72
 
73
@media (min-width: 1100px) {
74
  #columns {
75
    -webkit-column-count: 5;
76
    -moz-column-count: 5;
77
    column-count: 5;
78
  }
79
}
80
 
81
#columns:hover .pin:not(:hover) {
82
  opacity: 0.4;
83
}
 

pinterest like waterfall design purely css

CSSDeck G+