pinterest网站窗口好小

由上图对比可以看到，中间部分始终居中，但是会根据屏幕的大小判断一行最多显示多少张图片。让框架居中有多种方法，最常见的是添加 margin：0 auto；

因为我们要让整个屏幕显示至多张图，所以我只要求得屏幕至多能放下多少个图片后，剩下的数平均分给左右外边距，这样即能居中，例如：margin：10px auto

html代码：

<div class="container" style="margin:0 auto">

<div class="aside"></div>

<div class="photo_box">

<div class="photo_img"><img src="1.jpg" alt="" width="" height="" /></div>

<div class="photo_img"><img src="2.jpg" alt="" width="" height="" /></div>

</div>

...

</div>

js代码：

$(document).ready($onresize = function(){

var Winh = $(window).width(), Wimg = $(".photo_img").width() + 38,

Wsidebar = $(".aside").width() + 24

var mainWidth = Winh - Wsidebar

var imgBs = mainWidth % Wimg //imgBs为最多放下图片后剩下的余数

var a = Math.floor( imgBs / 2)//余数平分即为外边距大小

$(".container").css("margin-left", a )

$(".container").css("margin-right", a )

})

$(window).bind("resize", $onresize)

ps：有一个很重要的问题，必须给html强制滚动条，否则，在某些显示器下，会出现切边的效果，其实是因为开始算屏幕宽度的时候，滚动条还没加载出来，宽度会算多一点，这样，这样左右的外边距大于实际边距，就发生了切边的效果。像这样：html{ overflow:scroll}

这个想法就像是小时候做的数学题，一块多大面积的蛋糕，切成每份多大，最多能分给多少人，这里只是加了一个居中的条件。然后当浏览器改变大小的时候，也会重新加载一次，算一次。而图片的位移会使用Masonry.js这个库的动态效果，整个过程很流畅，如果网速不限制，显示的效果是非常好的。

先登录自己的账号，点击头像右边那个隐藏菜单按钮，选择设置，在浏览限制这里，将限制浏览的作品18这里勾选成显示作品，然后点击保存。返回首页就能看到r18的内容了。Pinterest是一家社交网络网站，由美国加州帕罗奥多的一个名为Cold Brew Labs的团队创办，于2010年正式上线。该网站采用的是瀑布流的形式展现图片内容，无需用户翻页，新的图片会不断自动加载在页面顶端，以便让用户不断的发现新的图片，此外，用户也可以按主题分类添加和管理自己的图片收藏，并与好友分享。Pinterest在界面上模仿了其网页版本，不过在易用性和性能上都针 对触摸设备进行了优化。软件共有三个主屏幕，我们默认打开的主屏上显示了用户自己和所关注的朋友的最新贴图。向左划动屏幕将会切换至目录界面，你可以从中选择一个图片分类来浏览，或是通过搜索功能来寻找感兴趣的照片。

---