当没有足够的项目来填充所有空间时，如何强制 ContentFlow 显示所有项目？答案

【问题标题】：How can i force ContentFlow to show all items when there are not enough items to fill all spaces?当没有足够的项目来填充所有空间时，如何强制 ContentFlow 显示所有项目？
【发布时间】：2011-07-18 18:03:15
【问题描述】：

大家好，阅读这篇文章的人..

我正在试验 ContentFlow.js

我在流程中有 5 个图像项。内容流配置为在两侧显示 7。而不是显示至少所有 5 个项目，它只显示其中的 3 个。功能还可以，但我希望显示所有项目：

<link rel="stylesheet" type="text/css" href="/js/ContentFlow/contentflow.css" media="screen" />
<script type="text/javascript" src="/js/ContentFlow/contentflow.js"></script>
<script tyle="text/javascript">
    var cf = new ContentFlow('contentFlow', {reflectionColor: "#ffffff",visibleItems:7,scaleFactor:1.3,circularFlow: false});
</script>

...

<div class="item">
    <img class="content" src="image.png" />
</div>

（此代码已简化为示例）

【问题讨论】：

好吧，我只是添加了空白图像来填补空白。不知道这是否是解决方案，但现在它对我有用......

标签： javascript jquery flow

【解决方案1】：

如果您要显示的图像数量是动态的，您能否在加载 ContentFlow 之前查看计数？如果低于 7，则将 visibleItems 设置为该值...否则使用 7。

【讨论】：

【解决方案2】：

您可以直接在 contentflow 的源代码中修复此问题。我刚刚遇到了同样的问题并追踪了它。

所以只需打开 contentflow_src.js 并查找“_positionItems”功能。您将找到以下代码行：

for (var i=1; i <= this.conf.visibleItems && 2*i < this.items.length ; i++) {

只需将其替换为：

for (var i=1; i <= this.conf.visibleItems && i < this.items.length ; i++) {

对我来说，这工作得很好，但我还没有进一步测试，所以这个“肮脏”的修复可能会在其他情况下导致错误。使用风险自负：p

【讨论】：