瀑布流布局：在Django中Bootstrap.css和Masonry.js实现瀑布流布局

静态文件加载顺序

Masonry.js基于JQuery.js加载，所以JS文件在引入顺序尤为重要，否则会报错误：

Uncaught TypeError: $(...).masonry is not a function

小编就在加载顺序犯了错误，折腾了半个小时才查出原因.

所以正确时引入顺序为：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdn.bootcss.com/masonry/4.2.2/masonry.pkgd.js"></script>

先引入JQuery.js，之后就不会出先JQuery配置Masonry时找不到函数了。
imagesloaded.pkgd.min.js这个JS文件是将图片加载完在进行元素排序，否则会出现乱版

配置Masonry

通过Django模板继承方式使用

{% block context %}
<div class="row clearfix grid"> <!-- grid为指定容器元素的标记 -->

        {% for lose in res_list %}
		<div class="col-md-4 column grid-item"> <!-- grid-item为指定被排列的元素 -->
			<div class="media well">
				<a href="#" class="pull-left thumbnail"><img src="{{ MEDIA_URL }}{{ lose.image }}" class="media-object" alt='' /></a>
				<div class="media-body">
					<h4 class="media-heading text-info">
                        <strong>{{ lose.name }}</strong>
					</h4>
                    <p class="text-success">
                        {{ lose.text }}
                    </p>
				</div>
			</div>
		</div>
        {% endfor %}
        
</div>
{% endblock %}

下面JS代码与html在一个文件内

<script type='text/javascript'>
	$('.grid').masonry({ //JQuery方式指定元素作为Masonry容器
		itemSelector: '.grid-item'
	});
</script>