Question

我正在尝试使用JQuery Columnizer插件（http://welcome.totheinter.net/columnizer-jquery-plugin/）为博客创建文章视图，以自动列化我的内容并对其进行分页。这是迄今为止我工作的JSFiddle：http://jsfiddle.net/opanitch/YY9x3/1/

基本HTML如下所示：

<div id="wrapper">
    <div class="page_template"><!-- Begin Paginate Template -->
        <div class='content'></div>
    </div><!-- End Paginate Template -->
    <div class="page">
        <div id="articleHeading">
            <p class="articleReturn"><a href="#">&laquo; Back to Newsroom</a></p>
                <h2 class="articleTitle">Article Title</h2>
                <p class="articleSubTitle">Subtitle</p>
                <div class="newsHR"></div>
                <div class="articlePic"></div>
            </div>
            <div id="articleContainer">
                <div id="articleBody">                        
                    <p class="articleCopy">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus dictum felis id ultrices. Etiam nisi augue, porttitor ac rhoncus non, vulputate eget elit. Donec mollis justo in mauris lobortis semper. Fusce eleifend cursus tincidunt. Vivamus vitae nibh ante, a vestibulum elit. Pellentesque id varius mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacus lectus, porttitor eget eleifend at, eleifend eget urna. Maecenas in urna lobortis nisl facilisis tempus sed non ante. Sed in eros egestas magna posuere auctor eu ac nisl.
                    </p>
                </div>
            </div>
            <div class="clear"></div>
            <div class="articleNav">
                <p id="prevArticle" class="articlePagination"><a href="#">&laquo; Previous page</a></p>
                <p id="nextArticle" class="articlePagination"><a href="#">Next page &raquo;</a></p>
            </div>
        </div>
    </div>

我正在使用插件的示例分页来通过此JQuery调用实现我的流体列/页面：

function buildNewsletter() {
    if($('#articleBody').contents().length > 0) {
        // when we need to add a new page, use a jq object for a template
        // or use a long HTML string, whatever your preference
        $page = $(".page_template:first").clone().addClass("newsPost").css("display", "block");

        // fun stuff, like adding page numbers to the footer
        $("#articleContainer").append($page);

        // here is the columnizer magic
        $('#articleBody').columnize({
             columns: 2,
             target: ".newsPost:last .content",
             overflow: {
                  height: pageHeight,
                  id: "#articleBody",
                  doneFunc: function(){
                       console.log("done with page");
                       buildNewsletter();
                  }
              }
          });
      }
  }

它在初始化时运行良好，但是一旦调整窗口大小，columnizer就会创建更多“页面”并使用冗余内容随意填充它们。任何人都可以帮助弄清楚为什么会这样吗？如果还不是很明显，我想要的结果是一个包含流体列的页面（意味着内容在调整大小时重新分发），而没有重复内容问题。我似乎已经让流畅的部分失去了，但额外的内容是一个问题。谢谢！

Answer 1

问题是内容正在重新列入与原始内容相同的内容。这意味着每次重新分配内容时，它只会添加到最终输出中，以前的列化页面永远不会被删除。

解决方案是手动管理原始内容的缓存，并在调整窗口大小时设置我们自己的重新列表功能。

一个有工作解决方案的jsfiddle：http://jsfiddle.net/Bka8P/

这个小提琴将所有内容都放入一个看不见的div中：

<div id="articleBodyCache">

列入：

<div id="articleBody">

然后我们手动清空articleBody div，并在页面调整大小时重新列出。由于我们手动执行此操作，因此我们还需要在列化时设置buildOnce属性，以便列化器onResize侦听器不会与我们自己的冲突器发生冲突。

    $('#articleBody').columnize({
        columns: 2,
        target: ".newsPost:last .content",
        buildOnce: true,
        ...

JQuery Columnizer在调整大小时创建重复内容

1 个答案: