<MyRusakov.ru />

Создание и продвижение лендинга под ключ

Создание и продвижение лендинга под ключ

Данный курс научит Вас создавать профессиональные лендинги на любую тематику с нуля и под ключ. Помимо теории Вы так же своими глазами будете видеть, как создаётся лендинг: заказывается дизайн, верстаются страницы, программируется клиентская часть и Admin-панель, а после лендинг размещается в Интернете. Так же Вы узнаете, как продвигаются лендинги и, самое главное, Вы увидите, как это делается на примере созданного лендинга до первых клиентов.

И, наконец, к курсу идут 4 очень полезных и актуальных Бонуса для лендингов: "Подключение онлайн-консультанта", "Система уведомлений по SMS", "Автоматизация управления Яндекс.Директом" и "Продажа товаров с AliExpress.com".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

Как подключить masonry jquery
21.06.2014 15:56:35 Как подключить masonry jquery Сообщение #1
bo4kov

bo4kov

Продвинутый

Продвинутый

Дата регистрации:
11.06.2012 11:21:31

Сообщений: 65

Здравствуйте! Помогите пожалуйста решить проблему по подключению 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 запроса, но как это сделать?
Профиль Ответить