四个选项：
这里有三个选项供您选择：
使用背景图片
Kangkan's background answer 已涵盖此内容。
如果这对您不起作用，我假设您只需要启用 JavaScript 的帮助，因为您说过非 JavaScript 用户会看到不同的页面。
使用插件
分页已完成。您在评论中说过您正在使用 jQuery。有很多用于分页的 jQuery 插件。找到一个你喜欢的，并使用它。它们的质量参差不齐，因此您需要对它们进行测试并查看它们的代码，但我敢肯定那里有质量不错的。
服务器端分页
这是主页加载的地方，或者根本没有任何产品，或者只有产品的第一页。通常，您会将所有产品放入一个容器中，如下所示：
<ul id='productList'>
</ul>
然后，您将拥有在结果页面之间移动的常用 UI 控件。您将拥有一个返回 HTML sn-ps 或 JSON 格式数据的服务器端资源，您可以使用这些数据填充该列表。为简单起见，我将使用 HTML（尽管我可能会在生产应用程序中使用 JSON，因为它往往更小）。每个产品条目都是它自己的独立块：
<li id='product-001'>
<div>This is Product 001</div>
<img src='http://www.gravatar.com/avatar/88ca83ed97a129596d6e8dd86deef994?s=32&d=identicon&r=PG'>
<div>Blurb about Product 001</div>
</li>
...然后页面返回您认为合适的数量。您使用 Ajax 请求页面并使用 JavaScript 更新产品列表。既然你说你使用 jQuery，这可以很简单：
$('#productList').load("/path/to/paging/page?start=X&count=Y");
这是example prototype（不是生产代码）；它伪造了 Ajax，因为 JSBin 给了我 Ajax 问题。
一个大页面下载，然后是客户端 JavaScript 分页
我不确定您是如何进行过滤的，但如果您有一个包含产品信息的元素，您可以将图像 URL 存储在其上的 data-xyz 属性中：
<div id='product-123' data-image='/images/foo.png'>
然后，当您的代码使其可见时，您可以轻松地向其添加 img：
var prod, imgsrc, img;
prod = document.getElementById('product-123');
prod.style.display = 'block'; // Or whatever you're doing to show it
imgsrc = prod.getAttribute('data-image');
if (imgsrc) {
img = document.createElement('img');
img.src = imgsrc;
prod.appendChild(img); // You'd probably put this somewhere else, but you get the idea
prod.removeAttribute('data-image');
}
编辑 在其他地方的评论中您说您正在使用 jQuery。如果是这样，上面的翻译可能如下所示：
var prod, imgsrc, img;
prod = $('#product-123');
prod.show();
imgsrc = prod.attr('data-image');
if (imgsrc) {
$("<img/>").attr('src', imgsrc).appendTo(prod); // You'd probably put this somewhere else, but you get the idea
prod.removeAttr('data-image');
}
隐藏时无需再次删除，因为图像已经显示，这就是为什么我在使用后删除该属性。
我使用data- 前缀的原因是验证：从HTML5 开始，您可以定义自己的data-xyz 属性，您的页面仍将通过验证。在早期版本的 HTML 中，不允许您定义自己的属性（尽管实际上主流浏览器并不关心），因此如果您为此使用自己的属性，页面将无法验证。
参考资料（w3.org）：
题外话，但是如果你使用像 jQuery、Closure、Prototype、YUI 这样的 JavaScript 库，那么其中的很多东西会变得容易得多。或 any of several others 为你平滑粗糙的边缘。（你已经说过你正在使用 jQuery。）