Django + Masonry + Imagesloaded + Twitter Style Pagination

O que é o Masonry?

Como o proprio site do plugin explica:

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

 O objetivo no final deste post é ter um layout organizado pelo plugin, com registros paginados e requisições via ajax para obter os registros das páginas seguintes, utilizando uma Class Based View no Django.

Requisitos:

• Django==1.11.1+
• Masonry
• ImagesLoaded

Bom, primeiramente faremos a View:

class PostListView(View):
	def get(self, request, *args, **kwargs):

		posts = Post.objects.all()

		RPP = 18
		PAGINA = 1
		TOTAL = posts.count()

		if request.GET.get('page'):
			PAGINA = int(request.GET.get('page'))

		page_template = 'blog/paginacao.html'

		template = 'blog/list.html'
		if request.is_ajax():
			template = page_template

		tem_mais = posts[PAGINA*RPP+1:]
		tem_mais = tem_mais.count()
		
		posts = posts[(PAGINA-1)*RPP:PAGINA*RPP]

		if posts.count() == 0:
			return HttpResponse('')

		VARS = {
			'posts':posts,
			'pag':PAGINA,
			'tem_mais': tem_mais,
			'total': TOTAL,
		}
		return render(request, template, VARS)

Serão necessários dois templates:

blog/list.html

{% extends "base.html" %}

{% block scripts %}
    <script src="{% static "site/vendor/masonry/jquery.masonry.pkgd.min.js" %}" type="text/javascript"></script>
    <script src="{% static "site/vendor/masonry/imagesloaded.pkgd.min.js" %}" type="text/javascript"></script>
    <script src="{% static "site/src/js/layout.js" %}" type="text/javascript"></script>
    <script src="{% static "site/src/js/blog.list.js" %}" type="text/javascript"></script>
{% endblock scripts %}

{% block conteudo %}
	<!-- Masonry Grid -->
	<div class="masonry-grid">
	    <div class="masonry-grid-sizer col-xs-6 col-sm-4 col-md-3 col-lg-2"></div>

	    {% for p in posts %}
	        <!-- Post Item -->
	        <div class="masonry-grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2">
	            
	        </div>
	        <!-- End Post Item -->
	    {% endfor %}

	</div>
	<!-- End Masonry Grid -->
	<div class='loading-bg'>
	    <div class='loading'></div>
	</div>
{% endblock conteudo %}

blog/paginacao.html

<!-- Masonry Grid -->
	<div class="masonry-grid">
	    <div class="masonry-grid-sizer col-xs-6 col-sm-4 col-md-3 col-lg-2"></div>

	    {% for p in posts %}
	        <!-- Post Item -->
	        <div class="masonry-grid-item col-xs-6 col-sm-4 col-md-3 col-lg-2">
	            
	        </div>
	        <!-- End Post Item -->
	    {% endfor %}

	</div>
	<!-- End Masonry Grid -->
	<div class='loading-bg'>
	    <div class='loading'></div>
	</div>

layout.js:

var Layout = function () {
    'use strict';

    var mobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

    // handle on page scroll
    var handleHeaderOnScroll = function() {
        if ($(window).scrollTop() > 60) {
            $('body').addClass('page-on-scroll');
        } else {
            $('body').removeClass('page-on-scroll');
        }
    }

    // handle carousel
    var handleCarousel = function() {
        var $item = $('.carousel .item');
        var $wHeight = $(window).height();
        $item.eq(0).addClass('active');
        $item.height($wHeight);
        $item.addClass('full-screen');

        $('.carousel img').each(function() {
            var $src = $(this).attr('src');
            var $color = $(this).attr('data-color');
            $(this).parent().css({
                'background-image' : 'url(' + $src + ')',
                'background-color' : $color
            });
            $(this).remove();
        });

        $(window).on('resize', function (){
            $wHeight = $(window).height();
            $item.height($wHeight);
        });
    }

    if($(window).width() > 992) {
        $('.screen__height').height($(window).height()/1.3);

        $(window).resize(function(){
            $('.screen__height').height($(window).height()/1.3);
        });
    }



    // handle group element heights
    var handleHeight = function() {
       $('[data-auto-height]').each(function() {
            var parent = $(this);
            var items = $('[data-height]', parent);
            var height = 0;
            var mode = parent.attr('data-mode');
            var offset = parseInt(parent.attr('data-offset') ? parent.attr('data-offset') : 0);

            items.each(function() {
                if ($(this).attr('data-height') == "height") {
                    $(this).css('height', '');
                } else {
                    $(this).css('min-height', '');
                }

                var height_ = (mode == 'base-height' ? $(this).outerHeight() : $(this).outerHeight(true));
                if (height_ > height) {
                    height = height_;
                }
            });

            height = height + offset;

            items.each(function() {
                if ($(this).attr('data-height') == "height") {
                    $(this).css('height', height);
                } else {
                    $(this).css('min-height', height);
                }
            });

            if(parent.attr('data-related')) {
                $(parent.attr('data-related')).css('height', parent.height());
            }
       });
    }

    return {
        init: function () {
            handleHeaderOnScroll(); // initial setup for fixed header
            handleCarousel(); // initial setup for carousel
            handleHeight(); // initial setup for group element height

            // handle minimized header on page scroll
            $(window).scroll(function() {
                handleHeaderOnScroll();
            });
        }
    };
}();

$(document).ready(function() {
    Layout.init();
});

blog.list.js

jQuery(document).ready(function($) {

    var carregando = false;
    $(window).on('scroll', function(event) {
        event.preventDefault();
        /* Act on the event */
        if($(window).scrollTop() + $(window).height() > $(document).height() - 100 && carregando == false && parseInt($('#tem_mais').val()) > 0) {
            // console.log("near bottom!");
            carregando = true
            retrive_posts();
        }
    });


    $('body').on('click', '.next', function(event) {
        event.preventDefault();
        carregando = true;
        /* Act on the event */
        retrive_posts();
    });

    function retrive_posts(){
        var pag = parseInt($('#pag').val())+1;
        $('.loading-bg').show();

        $.get('?page='+pag, function(data) {
            /*optional stuff to do after success */
            // console.log(data);
            // console.log(data == '');

            // console.log($('#tem_mais').length);
            console.log($('#tem_mais').val());

            if(data){
                $('#pag').val(parseInt(pag));
                // console.log(data);

                var aux = $('<div/>');
                $(aux).html(data);

                var tem_mais = $(aux).find('.tem_mais')[0];
                $('#tem_mais').val($(tem_mais).val());

                if (parseInt($('#tem_mais').val()) == 0) {
                    $('button.next').hide();
                }

                var $container = $('.masonry-grid');
                $container.imagesLoaded( function() {
                    $container.masonry({
                        itemSelector: '.masonry-grid-item', // use a separate class for itemSelector, other than .col-
                        columnWidth: '.masonry-grid-sizer',
                        percentPosition: true,
                        transitionDuration: 0,
                    });
                });

                // console.log($(aux).find('.masonry-grid-item.appended'));
                $(aux).find('.masonry-grid-item.appended').each(function(index, el) {
                    $(el).css({ opacity: 0 });
                    // console.log($(el));
                    $(el).imagesLoaded(function(){
                      // show elems now they're ready
                      $(el).css({ opacity: 1 });
                      $container.append( $(el) );
                      $container.masonry( 'appended', $(el), true );
                      $(el).removeClass('.appended')
                    });
                });
                carregando = false;
                $('.loading-bg').hide();
            }else{
                $('button.next').hide();
            }

        });
    }
});