中本聪top开发日记--自适应的小卡片

其实这篇文章根本不是什么前言，我已经在我的blog里面写了好几篇相关文章来介绍这个项目，只不过都隐藏了起来。这篇算个开发方面的前言吧。

这个网站的设计稿是用hotgloo做的（ubuntu上木有axure伤不起）如图所示

界面稍显简陋。。。

但是主体就是这样简单，小卡片们会自动根据宽度来排版

但是出现一个问题，小卡片的宽度为250.margin-left为30，也就是说整体宽度为280px，当右边空间不足280px时，小卡片自动补全到下一行了，但是

整体宽度还在那里，就会造成右边产生一个不足280px的空位，很难看

怎么解决这个问题呢？

我们可以控制整个ul标签的宽度，每当屏幕可显示宽度大于某个数值时，ul的宽度会随着变化到某个特定的值

function size(){var x = ($(window).width()-30)/280var y = parseInt(x)*280+30$(".ul_width").css("width",y)}$(window).resize(size)

其中

$(window).width()

会自动获得我们显示器可显示的范围的宽度

<pre name="code" class="javascript">$(window).resize(size)

这一条是监控如果显示器宽度变了（比如用户缩小网页页面，或者双屏幕用户切换显示器）会立刻触发“resize”的个函数

天价了上面的代码后，窗口无论怎么拖放，现实的内容永远都是精美的排版