LoginSignup
5

More than 3 years have passed since last update.

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

Last updated at Posted at 2016-05-13

masonryとは?

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)

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5