25.11.2012, 19:55
|
|
Интересующийся
|
|
Регистрация: 05.08.2012
Сообщений: 21
|
|
|
Jquery masonry. Проблема.
Есть такой простой код. При загрузке страницы картинки накладываются одна на другую. Если, когда уже страница загрузилась, поменять разрешение у браузера, то становится всё нормально, фото расставляются как надо. Подскажите, в чём проблема, пожалуйста. Причём, если сделать фото одинакового размера, то всё нормально.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Masonry — JQuery плагин для динамического отображения контента</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script> <!-- подключаем сам плагин -->
<script type="text/javascript" src="modernizr-transitions.js"></script> <!-- подключаем плагин заставляющий работать css transitions в браузерах не поддерживающих css3 -->
<style type="text/css">
body {background: #fefefe; color:#333; line-height:200%;}
.item {
float:left /* ОБЯЗАТЕЛЬНО задаем блокам float */;
border:1px solid black;
/* параметры анимации */
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
</style>
<script type="text/javascript">
function ImagesStart(id) {
var Images = [
"photes/сайт002",
"photes/сайт003",
"photes/сайт004",
"photes/сайт005",
"photes/сайт006",
"photes/сайт007",
"photes/сайт008",
"photes/сайт009",
"photes/сайт010",
"photes/сайт011",
"photes/сайт012",
"photes/сайт014",
"photes/сайт015",
"photes/сайт016",
"photes/сайт017",
"photes/сайт018",
"photes/сайт019",
"photes/сайт020",
"photes/сайт021",
"photes/сайт022",
"photes/сайт023",
"photes/сайт024",
"photes/сайт025",
"photes/сайт026",
"photes/сайт027",
"photes/сайт028",
"photes/сайт029",
"photes/сайт030",
"photes/сайт031",
"photes/сайт032",
];
for (var i = 0; i < Images.length; i++) {
$("#" + id).append ("<a href = '"+ Images[i] +".jpg'class = 'item1'><img id = '"+i+"' src = '"+Images[i]+"мал.jpg'class = 'item' onmouseover = 'over(this)' onmouseout = 'out(this)'></a>")
}
}
$(document).ready(function(){
ImagesStart("container");
$('#container').masonry({ // выбираем элемент-контейнер в котором расположены блоки для динамической верстки
itemSelector: '.item', // указываем класс элемента являющегося блоком в нашей сетке
singleMode: false, // true - если у вас все блоки одинаковой ширины
resizeable: true, // перестраивает блоки при изменении размеров окна
isAnimated: !Modernizr.csstransitions // анимируем перестроение блоков при помощи css transitions и Modernizr
});
});
</script>
</head>
<body>
<h3>Masonry — JQuery плагин для динамического отображения контента</h3>
<a href="masonry_demo.zip">скачать демо</a> / <a href="http://masonry.desandro.com/index.html">страница плагина с примерами и документацией</a>
<section id="container">
</section>
</body>
</html>
|
|
26.11.2012, 10:09
|
|
Интересующийся
|
|
Регистрация: 05.08.2012
Сообщений: 21
|
|
|
UP!
|
|
26.11.2012, 12:19
|
|
Интересующийся
|
|
Регистрация: 05.08.2012
Сообщений: 21
|
|
|
причём так только с фото. попытался дивы с рандомными параметрами зафигачить - всё окей.
|
|
26.11.2012, 19:02
|
 |
Аспирант
|
|
Регистрация: 14.09.2012
Сообщений: 83
|
|
может у вас картинки не успевают загружаться до начала работы скрипта?
$(document).ready - не всегда спасает...
попробуйте http://jquery-docs.ru/events/load/ |
|
26.11.2012, 21:04
|
 |
junior
|
|
Регистрация: 29.11.2011
Сообщений: 3,924
|
|
|
dixonich, не вникая - попробуй картинкам размеры задавать.
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
|
|
21.06.2014, 16:21
|
|
Новичок на форуме
|
|
Регистрация: 21.06.2014
Сообщений: 6
|
|
|
Не работает masonry при подргузки контента при помощи ajax
Здравствуйте! Помогите пожалуйста решить проблему по подключению masonry jquery (размещения элементов в оптимальной позиции). В общем есть такой html код:
<div class="news">
<?php foreach ($news as $item): ?>
<div class="kurs">
<div class="img">
<a href="site.ru"><img src=img/img.jpg"" alt="Img" title="img" /></a>
</div>
<div class="title_a">
<a href="site.ru">Ссылка</a>
</div>
</div>
<?php endforeach; ?>
</div>
Вот js код (библиотека jquery и masonry - подключены):
<script type="text/javascript">
$(document).ready(function(){
var $container = $('.news';
$container.imagesLoaded( function() {
$container.masonry({
columnWidth: 0,
gutter : 15,
itemSelector: '.kurs'
});
});
var inProcess = false;
var num = 20;
var cat = "<? echo $this->uri->segment(2); ?>";
var url = "<? echo $url; ?>";
$(window).scroll(function func () {
if($(window).scrollTop() + $(window).height() + 500 >= $(document).height() && !inProcess) {
$.ajax({
url: url,
method: 'GET',
data: {'num' : num, 'cat' : cat},
beforeSend: function() {
inProcess = true;
$('.loader'.show();
},
complete: function() {
$('.loader'.hide();
}
}).done(function(data){
data = jQuery.parseJSON(data);
if (data.length > 0) {
$.each(data, function(index, data){
$('.news'.append('<div class="kurs"><div class="img"><a href=site.ru"><img src="img/img.jpg" alt="Img" title="img" /></a></div><div class="title_a"><a href="site.ru">Cсылка</a></div></div>'
);
});
inProcess = false;
num += 20;
}
});
}
});
});
</script>
В общем ajax запрос работает, при прокрутки страницы до самого низа подгружается контент.
Masonry jquery работает тоже нормально, но для первых 20 выведенных записей через php (не через ajax), но потом когда я прокручиваю страницу до самого низа контент подгружается но не срабатывает masonry (то есть блоки налазят друг на друга и стоят в разброс). Может как-то после ajax запросы еще раз вызывать masonry, или как?
Вот как masonry обрабатывает первые 20 записей загруженные через php (как я и хотел):
Фото
Вот как выглядит страница когда контент погрузился:
Фото 2
Как мне сделать так, чтобы подгруженные данные выглядели как первые 20 записей? Я предполагаю, что нужно masonry вызывать как-то второй раз, после загрузки ajax запроса, но как это сделать?
|
|
21.06.2014, 16:36
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от bo4kov
|
|
что нужно masonry вызывать как-то второй раз, после загрузки ajax запроса, но как это сделать?
|
а почитать доку не судьба -- добавили фото после добавили новые элементы для обработки плагином
http://masonry.desandro.com/methods.html#additems
по ссылке есть даже пример |
|
21.06.2014, 18:50
|
|
Новичок на форуме
|
|
Регистрация: 21.06.2014
Сообщений: 6
|
|
Что-то все равно не получается, в чем ошибка?
Жирным я выделил тот код, который добавил.
if (data.length > 0) {
$.each(data, function (index, data){
elems = $('.news').append('<div class="kurs"><div class="img"><a href="http://vsevideokursi.ru/videokurs/' + data.title_en + '"><img src="http://vsevideokursi.ru/img/articles/' +data.img + '" alt="' + data.title +'" title="' + data.title +'" style="width: 200px;"/></a></div><div class="title_a"><a href="http://vsevideokursi.ru/videokurs/' + data.title_en + '">' + data.title +'</a></div></div>');
});
inProcess = false;
num += 20;
[B]$container.imagesLoaded( function() {
$container.masonry( 'appended', elems );
});[/B]
}
Может быть я не тот элемент добавляю в masonry? |
|
21.06.2014, 18:54
|
|
Новичок на форуме
|
|
Регистрация: 21.06.2014
Сообщений: 6
|
|
Что-то жирного не видно, в общем я добавил вот этот код
$container.imagesLoaded( function() {
$container.masonry( 'appended', elems );
});
И поместил в переменную elems =
$('.news').append('<div class="kurs"><div class="img"><a href="http://vsevideokursi.ru/videokurs/'..........
Этот код работает уже немного лучше, но при прокрутке страницы вниз контент подгружается, masonry срабатывает но появляется пустота, и эта пустая часть страницы увеличивается с каждой подгрузкой контента, вот как на фото
Фото
Как убрать то пустое место?
Последний раз редактировалось bo4kov, 21.06.2014 в 19:02.
|
|
21.06.2014, 19:26
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
bo4kov,
var div = $('<div/>').append('<div class="kurs
$container.masonry( 'appended', div.children() )
|
|
|
|
