0

我正在尝试使用 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();
                  }
              }
          });
      }
  }

它在初始化时运行良好，但是一旦调整窗口大小，分栏器就会创建更多“页面”并似乎随机地用冗余内容填充它们。谁能帮助弄清楚为什么会这样？如果还不是很明显，我想要的结果是一个带有流动列的页面（意味着内容在调整大小时重新分配），没有重复内容的问题。我似乎已经把流畅的部分记下来了，但额外的内容是个问题。谢谢！

4

1 回答 1

0

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

一种解决方案是手动管理原始内容的缓存，并在调整窗口大小时设置我们自己的 recolumnize 函数。

一个带有工作解决方案的 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,
        ...
于 2013-04-30T19:24:41.457 回答