前端js如何实现这样的效果？

Question

类似于这个网站的页面效果,500px,简单点的版本 饿了么的餐厅筛选饿了么
多个不同的tab,比如是按照默认，最新，最热，收藏数，点赞数等等排序筛选,每个tab下面用ajax获取的图片的顺序都是不一样的。

我的思路是：
通过ajax从后台拿到json数据以后,根据前端模版来填充数据。再然后根据相应的jquery插件调整图片的布局和显示。通过tab切换ajax动态请求不同的数据,并进行图片数据缓存，同时更改url路径。图片的显示采用滚动加载方式。

其中有几个需求

1. 初次请求的图片数据应当少，通过滚动加载之后的图片，这样可以避免初次加载过多

2. 不同的tab切换的时候,ajax请求数据后缓存数据，url更改。

疑问：

1. tab切换如何更改url路径,比如加上类似?type=popular ?type=new,是后台直接提供url？还是可以在tab切换ajax动态加载的时候更改url，如何处理？

2. ajax的缓存怎么处理？当再次切换的时候不用重新请求？

3. 图片的展示像500px这样，是如何做到的？有没有好的插件？

4. 图片展位图是如何先确定图片的宽高来生成相应的展位图的，并且可以布局的这么好？

Answer 1

1. 绑定hashchange事件;

2. 可以做本地存储,用h5的localstorage／appCache等

3. 类似于瀑布流 给个github地址：https://github.com/desandro/masonry

Answer 2

1、tab切换如何更改url路径,比如加上类似?type=popular ?type=new,是后台直接提供url？还是可以在tab切换
--这种每次切换tab直接ajax请求后台拿数据（可以封装成json），到前台后，直接生成tab页右侧内容（当前，获取的肯定是前5条，因为要下拉加载，东西太多加载会慢），url这个可以直接从后台获取到前台，然后在前台html元素加一个新属性存放，然后用户在点击时，直接链接对应属性的内容即可。也可以直接后台传一个id给前台，然后用户访问时，先进入后台，后台查询id对应的url再转发。
2、ajax动态加载的时候更改url，如何处理？
--tab页对应右侧内容是动态的，如果是固定的就不能实现动态加载了吧。每次tab页切换，右侧内容对应更新，更新的是整个右侧div里面的内容，在ajax请求后台返回的消息后，前台再生成对应的html内容填入到div中
3、ajax的缓存怎么处理？当再次切换的时候不用重新请求？
--图片数据为何要缓存呢？现在网络应该不会慢到加载个图片会很忙的节奏吧。
4、图片的展示像500px这样，是如何做到的？有没有好的插件？
--直接做个瀑布流，就好了（但是要注意的是，500px这个瀑布流是高度是固定的，另外淘宝那边瀑布流是宽度是固定的，总之有一个要固定，好像html5很容易就能实现）
5、图片展位图是如何先确定图片的宽高来生成相应的展位图的，并且可以布局的这么好？
--同4