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)
もっとシンプルにできる方法があると思いますが、なかなかやり方が見つからなかったです。