一.JSONP
1浏览器同源策略
通过Ajax，如果在当前域名去访问其他域名时，浏览器会出现同源策略，从而阻止请求的返回
由于浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。
特别的：由于同源策略是浏览器的限制，所以请求的发送和响应是可以进行，只不过浏览器不接受罢了。
浏览器同源策略并不是对所有的请求均制约：
- 制约： XmlHttpRequest
- 不叼： img、iframe、script，link等具有src属性的标签,不鸟同源策略
利用 不鸟同源策略 的标签，发送跨域Ajax请求， <script>标签
同源ajax请求Jquery实现方法：
function Ajax(){
$.ajax({
url: '/get_data/',
type: 'POST',
data: {'k1': 'v1'},
success: function (arg) {
alert(arg);
}
})
}
跨域ajax,例如当前页面设置域名为wangjian.com,请求域名为jasonwang.com，具体代码如下：
function Ajax2(){
$.ajax({
url: 'http://jasonwang.com:8001/api/',
type: 'GET',
data: {'k1': 'v1'},
success: function (arg) {
alert(arg);
}
})
}
虽然被请求域名jasonwang.com可以接受请求，但由于浏览器的同源策略，请求域名wangjian.com无法获取到该资源。报错如下截图：
如何解决此类问题呢，JSONP出场啦，其内部实现原理是借用img,script,link,frame等带有src属性的标签，不受同源策略限制，可以摆脱此限制，不过需要注意的是，只能对get方法生效，由于src等均是痛get方法获取请求，所以对POST方法并无效果。模拟jquery内部事项跨域请求如下：
jasonwang.com此域名后台处理相关代码：
from django.shortcuts import render,HttpResponse
import json
# Create your views here.
def api(request):
li = ['alex', 'eric', 'tony']
# "['alex', 'eric', 'tony']"
temp = "fafafa(%s)" %(json.dumps(li))
# fafafa(['alex', 'eric', 'tony'])
return HttpResponse(temp)
wangjian.com此域名前端请求jasonwang.com内部js代码：
function Ajax3(){
// script
// alert(api)
var tag = document.createElement('script');
tag.src = 'http://jasonwang.com:8001/api/';
document.head.appendChild(tag);
document.head.removeChild(tag);
}
function fafafa(arg){
console.log(arg);
}
此时可以实现跨域请求
Jquery内实现便是基于以上原理实现，首先在head创建带有src属性的标签，如script,img等，并将src设定为要跨域的域名，最后添加删除此标签以获取跨域请求的资源
Jquery中应用JSONP方法如下：
function Ajax5(){
// script
// alert(api)
$.ajax({
url: 'http://www.jxntv.cn/data/jmd-jxtv2.html',
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback',
{# jsonpcallback: 'list',#}
success: function (arg) {
console.log(arg);
}
})
}
function list(arg){
console.log(arg);
}
可以简单地将这个理解为JSONP类型请求回调函数，jQuery在我们每次指定Ajax请求方式为JSONP时都会生成这么一个JSONP回调函数。虽然jQuery会自动帮我们生成一个回调函数，但是我们也可以通过设置jsonpCallback参数为jsonp请求定制一个我们自己的回调函数。
2.是否可以发POST请求？
不能发POST
<script src='http://www.jxntv.cn/data/jmd-jxtv2.html?callback=qwerqweqwe&_=1454376870403'>
==> 最终全部都会转换成GET请求
扩展：
跨域Ajax ->
JSONP
CORS-跨站资源共享，浏览器版本要求
随着技术的发展，现在的浏览器可以支持主动设置从而允许跨域请求，即：跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器允许跨域请求。
二.瀑布流式布局实现方法：
瀑布流 ，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
绝对定位方式的瀑布流布局：
一、布局
1、包围块框的容器:
<div class="container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
2.将容器分割成几列，每一列添加信息，形成类似瀑布流式的前端展现效果，一下为容器样式
<style>
.container{
width: 980px;
margin: 0 auto;
}
.container .column{
float: left;
width: 245px;
}
.container .item img{
width: 245px;
}
</style>
3.通过Django自定义tag对后台传给前端的图片列表信息分离处理。
模版语言中自定义函数：
simple_tag
参数：可以传多个参数 hanshu 1 2 3
条件：
模版语言
{% if hanshu 1 2 3 %}
filter
参数：传一个 hanshu|"1,2,3"
条件：
模版语言
{% if 123|hanshu %}
自定义templatetags,代码如下：
from django import template
from django.utils.safestring import mark_safe
from django.template.base import resolve_variable, Node, TemplateSyntaxError
register = template.Library()
@register.filter
def detail1(value,arg):
"""
查看余数是否等于remainder arg="1,2"
:param counter:
:param allcount:
:param remainder:
:return:
"""
allcount, remainder = arg.split(',')
allcount = int(allcount)
remainder = int(remainder)
if value%allcount == remainder:
return True
return False