他们如何填充本网站上的框？

有没有人知道什么JS或插件等用于填充内容和位置在www.jwt.com主页上的框？当您向下滚动时，会通过AJAX绘制更多框。他们如何填充本网站上的框？

是否有任何现成的可用插件，我可以使用相同的功能？

感谢

P/S：我不知道为什么他们投票，因为我学到了很多东西，因为我这个不到24小时前发布试图在这里给出的建议关闭该线程。这可能对您没有帮助，但对像我这样的人非常有帮助。

2012-07-07 Bongbong

通过它的外观，他们已经使用了可以在这里找到的同位素：http://isotope.metafizzy.co/。看看无限滚动演示 – Zappa 2012-10-05 10:52:21

该网站似乎用自己的Javascript库，在“编译”的形式查看这里：http://www.jwt.com/javascript/src/compiled.js?build=1181

它似乎也使用jQuery。

箱子本身按照使用绝对定位的列布局。这可以在Firefox的DOM Inspector中看到。

该网站有一个<noscript>后备部分包含相同的标记，但没有任何JS交互。

2012-07-07 22:39:43 Dai

谢谢，但我想知道是否有任何现成的可用插件，我可以使用相同的功能，我可以使用。 – Bongbong 2012-07-07 22:43:50

从我可以告诉，这是JQuery。在滚动时，有GET请求： http://www.jwt.com/home/index/page/# （＃是虚拟“页号”，即2,3等）

这些返回一个JSON响应，其包括由DIVS和HTML属性其他HTML添加到页面。

从compile.js中的注释，例如：/ * /js/lib/address.js */etc ...它看起来像compile.js基本上是一个包含许多较小的.js文件的文件，并且在一个文件中提供所有文件（一个http请求/响应）。这是许多框架会为你做的事情（Ruby @ Rails提供这个）。

获取Firebug，如果尚未使用它。我发现它使理解这些页面更容易（即你可以实时看到ajax响应/请求）

加入：我不知道插件，但这不应该太难复制。你基本上有一个事件（如jquery的“滚动”）触发ajax调用，并且当这个ajax调用成功返回时，你将获取html并将其附加到现有内容。

2012-07-07 22:50:15

谢谢。这是我关心的脚本中的定位计算和显示随机框的时间。 – Bongbong 2012-07-08 10:03:26

基本上，一旦用户滚动到页面底部（scrollY> = pageY），您必须让JavaScript检测页面高度，然后调用您的AJAX加载函数。如果您愿意，您也可以使用JS或CSS来进行淡入。

为了让它更流畅，我建议您在scrollY> =（pageY - 100px）左右时调用AJAX加载......这样用户不必一直滚动到底部为更多内容加载。

2012-07-08 10:48:57

感谢您的支持！ – Bongbong 2012-07-08 16:50:16

回答