вопрос
Решил реализовать (Динамичную сетку новостей) используя "Masonry".
Все как бы хорошо новости группируются но вот не задача новости начинают заплывать друг на друга и это стало проблемой для меня.Я пытался исправить но уже нет сил.Вы скажите чтобы я выставил высоту для блоков...Но мне нужно чтобы блок сам менял высоту по наполнении.Помогите пожалуйста решить проблему может это в самом скрипте.
Сайт для просмотра
Скрипт;
Сам скрипт Masonry может в нем нужно что-то изменить
краткая новость;
CSS:
Все как бы хорошо новости группируются но вот не задача новости начинают заплывать друг на друга и это стало проблемой для меня.Я пытался исправить но уже нет сил.Вы скажите чтобы я выставил высоту для блоков...Но мне нужно чтобы блок сам менял высоту по наполнении.Помогите пожалуйста решить проблему может это в самом скрипте.
Сайт для просмотра
Скрипт;
Сам скрипт Masonry может в нем нужно что-то изменить
<script>
$(function() {
$('#wrapper-main').masonry({
columnWidth: 0,
itemSelector: '.short-item'
});});
</script>
краткая новость;
<div class="short-item">
<span class="cat-ico {category-icon}"><img src="{THEME}/img/category-ico/{category-icon}.png" /></span>
<h2>
{title limit="20"}
<i>{date=M d, Y}</i>
</h2>
[xfvalue_video]
[image-1]<img src="{image-1}" class="poster" />[/image-1]
<p>{short-story limit="350"}</p>
<span class="author-news">
<img src="{avatar}" alt="{login}"/>
<span>"{avtor_fullname}"</span>
<span class="name-nic">{author} <i>(Блогер)</i></span>
</span>
<strong>
<i class="view">{vote-num}</i>
<i class="comm">{comments-num}</i>
</strong>
</div>
CSS:
/*Краткая новость=========================================*/
.short-item {
background:#fff;
float:left;
margin:5px 5px 5px 5px;
width:300px;
position:relative;
box-shadow: 0 1px 3px rgba(34,25,25,0.4);
-moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
-webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
-webkit-transition: top 1s ease, left 1s ease;
-moz-transition: top 1s ease, left 1s ease;
-o-transition: top 1s ease, left 1s ease;
-ms-transition: top 1s ease, left 1s ease; }
.short-item img.poster {
width:100%;
}
.short-item p {
position:relative;
padding:25px;
color:#888;
font-size:13px;
border-bottom:1px solid rgba(211,211,211,1.00);
}
.short-item strong {
float:right;
display:block;
padding:10px;
}
.short-item strong i {
margin-left:10px;
color:#333;
font-size:12px;
padding-left:19px;
width:15px;
height:15px;
font-style:normal;
}
.short-item strong i.comm {
background:url("../img/icon/comm.png") no-repeat;
}
.short-item strong i.view {
background:url("../img/icon/view.png") no-repeat;
}
.short-item h2 {
padding:30px 30px 20px 30px;
font-size:15px;
text-transform:uppercase;
}
.short-item h2 i {
display:block;
font-style:normal;
font-size:11px;
color:#777;
}
/*==================*/
.short-item .cat-ico {
width:40px;
height:40px;
position:absolute;
top:20px;
right:10px;
border-radius:100%;
}
/**/
.short-item .templates {background:rgba(11,127,184,0.8);}
.short-item .modules {background:rgba(255,162,70,0.8);}
.short-item .news {background:rgba(21,148,51,0.8);}
.short-item .music {background:rgba(223,89,91,1.00);}
.short-item .video {background:rgba(99,3,181,1.00);}
/*==================*/
.short-item .cat-ico img {
margin:10px 10px;
}
/**/
.short-item .author-news {float:left;margin:5px 15px 6px;overflow:hidden;width:150px;display:inline-block;}
.short-item .author-news img {float:left;display:inline;width:30px;border-radius:100%;margin-right:10px;}
.short-item .author-news span a {font-size:11px;font-style:normal;font-family: 'PT Serif Caption', serif;color:#1c94d0;}
.short-item .author-news .name-nic {display:block;text-transform:capitalize;}
.short-item .author-news .name-nic i {font-style:normal;color:#999;}
/**/
iframe, video, media {width:100%;height:200px;}
/*END Краткая новость=========================================*/
