javascript - Isotope Masonry with multiple widths columns -
javascript - Isotope Masonry with multiple widths columns -
i'm trying layout using has 3 different widths using masonry:
the problem lastly element doesn't seem work get:
this code:
$( function() { $('.isotope').isotope({ itemselector: '.item', masonry: { columnwidth: 394 } }); }); #main{ width: 1250px; margin: 0 auto; .isotope{ max-width: 1250px; .item { float: left; width: 394px; &.width2 { width: 835px; } &.width3 { width: 367px; } } } } <div id="main"> <div class="isotope"> <div class="item"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-1.jpg"></div> <div class="item"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-2.jpg"></div> <div class="item"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-3.jpg"></div> <div class="item width2"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-4.jpg"></div> <div class="item width3"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/home-5.jpg"></div> </div> </div>
any ideas problem?
1.jpg wider image , 2.jgp little onces
class="snippet-code-html lang-html prettyprint-override"> <div id="main"> <div class="isotope"> <div class="item"><img src="2.jpg"></div> <div class="item"><img src="2.jpg"></div> <div class="item"><img src="2.jpg"></div> <div class="item width2"><img src="1.jpg"></div> <div class="item width3"><img src="2.jpg"></div> </div> </div>
hey split class items in code , worked.
class="snippet-code-css lang-css prettyprint-override"><style> #main{ width: 1250px; margin: 0 auto; } #main .isotope{ max-width: 1250px; } .item { float: left; width: 394px; } .width2 { width: 835px; } .width3 { width: 367px; } </style>
javascript html css plugins
Comments
Post a Comment