我本来是想找一款使用的瀑布流插件，基本要求就是要支持响应式，也要兼容IE8，Github里有一个Masnory插件，看上去高大上，可是好像不兼容IE8，我看蛮多瀑布流插件都是响应式的，但是兼容IE8的蛮少的，估计这种浏览器在国外快绝版了吧。
PINTERESTGUID插件
这是我在JQuery之家看到的插件，他可以兼容IE8，而且用起来好简单。
看起来蛮不错的，可是不支持响应式，我就想帮它加一个响应式的功能。在Github上没看到这个项目，所以我就下载下来直接改动一下。
原版本
原版的引用参数是这样的：
$("#gallery-wrapper").pinterest_grid({
no_columns: 5,
padding_x: 10,
padding_y: 10,
margin_bottom: 50,
single_column_breakpoint: 700
});
padding_x,padding_y就是各个卡片之间的右间距和下间距，
no_columns就是制定每行显示多少个卡片，默认是5
single_column_breakpoint是指屏幕宽度低于这个数值的时候就变成单列显示（好像也算是个简单的响应式吧）。
修改版本
思路就是模仿owl-carousel插件，做一个二维数组：
[[0,1],[480,2],[640,3],[960,4],[1280,5]]
意思不难理解，解释为：
当屏幕宽大于0，列数设为1
当屏幕宽大于480，列数设为2
当屏幕宽大于640，列数设为3
当屏幕宽大于960，列数设为4
当屏幕宽大于1280，列数设为5
我直接把原来的single_column_breakpoint参数删除掉，添加了一个breakpoint参数，在做Dom节点样式修改的时候，做一个for循环，判断当前的屏幕宽处于哪一个区间，然后做一个瀑布流绘制。
Plugin.prototype.make_layout_change = function(_self) {
_width = $(window).width();
if (_self.options.breakpoint) {
var _arr = _self.options.breakpoint;
var end = _arr.length - 1;
if (_width > _arr[end][0]) {
_self.calculate(_arr[end][1])
} else {
for (i = 0; i < end; i++) {
if (_width > _arr[i][0] && _width < _arr[i+1][0]){
_self.calculate(_arr[i][1]);
}
}
}
} else {
_self.calculate(_self.options.no_columns)
}
};
这一段就是我做的for循环，calculate为绘制函数，用来绘制瀑布流，参数是设置的列数。
花了我好大的功夫，功能还是实现了，心里有点小开心，但是不可以真的拿来用在项目中，因为这插件本身的执行效率就非常的卡，卡片一多就非常的卡，所以这个插件也只能这样拿来看看代码，练练手而已。
最后，我把它改名为Pinterest_responsive_grid发布在了我的Github项目里，还有我做的DEMO。