Django jquery masonryを使った、twitter風の無限スクロール

## masonryとは？
 - http://masonry.desandro.com/

## home.html
```
{% block container %}
<div id="sec1" class="text-page_home">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h1>{% include "_brandname.html" %}</h1>
        <p class="lead"><sapn id="font_bold">「#トレンドワード」</sapn>をInstagram人気投稿より楽しめます。</p>
      </div>
    </div>
  </div>
</div>

<div id="sec3">
  <div id="container">
    <div id="works_list">
      {% for m in media %}
        <div class="work_item">
          <a href="{{ m.media_link }}" target="_blank">
            <img class="lazy" src="{{ m.standard_resolution_url }}" data-original="{{ m.standard_resolution_url }}" width="140" height="183" alt="ニューヨークのグラフティ">
          </a>
          <p>{{ m.caption|capfirst|striptags }}</p>
        </div>
      {% endfor %}
    </div>
  </div>
</div>
{% include "_pagination.html" %}
{% endblock container %}
```


## _pagination.html
```
{% load i18n %}
<div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}"></a>
        {% endif %}
    <span class="current">
    </span>
    {% if page_obj.has_next %}
        <div id="next">
            <a href="?page={{ page_obj.next_page_number }}"></a>
        </div>
    {% endif %}
    </span>
</div>
```


## script
```
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/jquery.magnific-popup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script src="{% static 'site/js/site.js' %}"></script>
<script src="{% static 'site/js/masonry.pkgd.min.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.0.0/imagesloaded.pkgd.min.js"></script>

jQuery(function($){
    $("img.lazy").lazyload({
        effect: 'fadeIn',
        effectspeed: 1000,
        threshold: 200
    });
    $('img.lazy').load(function() {
        masonry_update();
    });
    function masonry_update() {
        ww = $(window).width();
        var cw = 180;
        if(ww < 460) { cw = 160; }
        var works_list = $('#works_list');
        works_list.imagesLoaded(function(){
            works_list.masonry({
                itemSelector: '.work_item',　
                isFitWidth: true,　
                columnWidth: cw
            });
        });
     }
    var timer = false;
    $(window).resize(function(){
        ww = $(window).width();
        if (timer !== false) {
            clearTimeout(timer);
        }
        timer = setTimeout(function() {
            masonry_update();
        }, 200);
    });
});
var $container = $("#works_list");
$(function () {
    $container.infinitescroll(
        {
            navSelector: "#next",
            nextSelector: "#next a",
            itemSelector: ".work_item",
            loading: {
                finishedMsg: "",
                img: "http://matemedia.com/wp-content/uploads/2014/02/loading-scroll-transparent.png",
                msg: null,
                msgText: ""
            }
        },
        function (newProducts) {
            var $newProds = $(newProducts).css({"opacity": 0});
            $newProds.imagesLoaded(function () {
                $newProds.animate({"opacity": 1});
                $container.masonry("appended", $newProds, true);
            });
        }
    );
});
</script>
```


## views.py
```
class HomePage(generic.TemplateView):
    template_name = "home.html"
    paginate_by = 10

    def get(self, request, *args, **kwargs):
    
        paginator = Paginator(InstagramPlayer.get_all(), self.paginate_by)
        page = self.request.GET.get('page')

        try:
            page_obj = paginator.page(page)
        except PageNotAnInteger:
            page_obj = paginator.page(1)
        except EmptyPage:
            page_obj = paginator.page(paginator.num_pages)

        kwargs["media"] = page_obj
        kwargs["page_obj"] = page_obj

        return super(HomePage, self).get(request, *args, **kwargs)
```



もっとシンプルにできる方法があると思いますが、なかなかやり方が見つからなかったです。