Article introduction of Wulin.com (www.vevb.com): I used to think that the layout of the picture waterfall in Chinaz is very good. I have seen some methods implemented by others before, most of which are implemented using js. I tried it today and simply achieved similar layout effects with CSS3. I hope it will be useful to everyone! Effects in Chinaz
I used to think that the layout of the picture waterfall in Chinaz is very good. I have seen some methods implemented by others before, most of which are implemented using js. Today I tried it and simply implemented similar layout effects with CSS3. I hope it will be useful to everyone! Effects in Chinaz:
My code:
CSS3 waterfall layout.container{-webkit-column-width-moz-column-width-o-column-width-webkit-column-gap-moz-column-gap-o-column-gapdiv:not(.container){-webkit-border-radius-moz-border-radiusborder-radiusbackgroundborderdisplaywidthpositionmargin.title{line-heighttext-alignfont-familyPure CSS3 waterfall layout
Running effect (FireFox, passed the test under Google Chrome, but other browsers did not test ~~):