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

初期化では正常に実行されますが、ウィンドウのサイズが変更されるとすぐに、columnizerはより多くの「ページ」を作成し、ランダムに冗長なコンテンツでそれらを埋めます。誰かがこれが起こっている理由を理解するのを助けることができますか？まだ明らかでない場合、私の望ましい結果は、コンテンツの複製の問題がなく、流動的な列を持つページ（つまり、サイズ変更時にコンテンツが再配布されることを意味します）です。流動的な部分を落としたようですが、余分なコンテンツが問題になっています。ありがとう！

4

1 に答える 1

0

問題は、コンテンツが元のコンテンツと同じように再列化されていることです。これは、コンテンツが再列化されるたびに、最終的な出力に追加されるだけで、以前に列化されたページが削除されることはないことを意味します。

解決策は、元のコンテンツのキャッシュを手動で管理し、ウィンドウのサイズが変更されたときに独自の再列化機能をセットアップすることです。

実用的なソリューションを備えた 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 に答える