JQuery Columnizer在調整大小時創建重複內容

我正嘗試使用JQuery Columnizer插件（http://welcome.totheinter.net/columnizer-jquery-plugin/）爲博客創建文章視圖以自動對列表內容進行分欄和分頁。這是我的工作的jsfiddle至今：http://jsfiddle.net/opanitch/YY9x3/1/JQuery Columnizer在調整大小時創建重複內容

基本的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(); 
        } 
       } 
      }); 
     } 
    }

它在初始化時運行良好，但是一旦窗口被調整大小，欄目管理器就會創建更多的「頁面」，並隨機填充冗餘內容。任何人都可以幫助找出爲什麼會發生這種情況？如果它還不是很明顯，我期望的結果是帶有流動列的頁面（意味着內容在重新調整大小時重新分配），而不會出現重複的內容問題。我似乎已經取得了流體部分，但額外的內容是一個問題。謝謝！

來源

2013-02-13 opanitch

問題在於內容正在重新排列成與原始內容相同。這意味着每次內容重新排序時，它只會添加到最終輸出中，以前的列化頁面不會被刪除。

解決方案是手動管理原始內容的緩存，並在窗口調整大小時設置我們自己的重新調整函數。

與工作解決方案一的jsfiddle：http://jsfiddle.net/Bka8P/

這撥弄把所有的內容變成一種無形的div：

<div id="articleBodyCache">

其中columnizes到：

<div id="articleBody">

然後我們手動清空articleBody div，並重新調整p年齡重新調整。由於我們正在手動執行此操作，因此我們還需要在列化時設置buildOnce屬性，以便列化器onResize偵聽器不會與我們自己的衝突。

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

來源

2013-04-30 19:24:41

JQuery Columnizer在調整大小時創建重複內容

回答

相關問題