2012年5月15日 星期二

wordpress上使用jquery.masonry


<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.7.1.min.js"></script>
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.masonry.min.js"></script>

注意
jquery主體要在最上面
中間要是wp_head()
下方才能載入jquery.masonry.min.js


$(function(){
$('#news_container').masonry({
// options
itemSelector : '.news_col',
columnWidth : 295
 });
});

295是news_col這物件的寬+左右padding+左右margin


.news_col{
float:left;
background:#EFEFEF;
margin-bottom:15px;
margin-left:15px;
padding-left:10px;
padding-right:10px;
width:auto;
width:260px;


沒有留言:

張貼留言