Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/373.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript JQuery列生成器在调整大小时创建重复内容_Javascript_Jquery_Pagination_Multiple Columns_Window Resize - Fatal编程技术网

Javascript JQuery列生成器在调整大小时创建重复内容

Javascript JQuery列生成器在调整大小时创建重复内容,javascript,jquery,pagination,multiple-columns,window-resize,Javascript,Jquery,Pagination,Multiple Columns,Window Resize,我正在尝试使用JQuery Columnizer插件()为博客创建一个文章视图,以自动对我的内容进行列化和分页。以下是我迄今为止的一部分工作: 基本HTML如下所示: <div id="wrapper"> <div class="page_template"><!-- Begin Paginate Template --> <div class='content'></div> </div>&

我正在尝试使用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>

它在初始化时运行良好,但一旦调整窗口大小,columnizer就会创建更多的“页面”,并用冗余内容随机填充它们。有人能帮我弄清楚为什么会发生这种事吗?如果还不是很明显,我想要的结果是一个具有流动列的页面(意味着内容在调整大小时重新分布),而不会出现内容复制问题。我似乎已经把流体部分弄下来了,但是额外的内容是个问题。谢谢

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

一个解决方案是手动管理原始内容的缓存,并在调整窗口大小时设置我们自己的重新聚集功能

具有工作解决方案的JSFIDLE:

此小提琴将所有内容放入一个不可见的div中:


其中列为:


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

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