Question

解释情况：

我在这个特定的棋盘上同时使用了masonry.js和jscroll.js（无限滚动）。

http://lifeto.cafe24.com/xe/request

正如你所看到的那样，情况是，董事会的前20个列表在masonry.js下呈现完全整洁，但它是由jscroll.js稍后添加的那些列表。不能与masonry.js合作的dom

所以，我尝试运行masonry.js作为jscroll.js的回调函数，这样当我滚动时，内容加载了masonry.js 但不幸的是，它似乎无法发挥作用。

这是完整的js脚本。

/* infinite scroll */
jQuery(document).ready(function() {
    jQuery('.board_content').jscroll({
        loadingHtml: '<div class="loading_div"><center><img src="layouts/wb10/ajax-loader4.gif" alt="Loading" /></center></div>',
        padding: 0,
        contentSelector: '.board_list',
        autoTriggerUntil: 30,
        nextSelector: '.next_button',
        callback: function() {
            var container = document.querySelector('.masonry');
            var msnry = new Masonry(container, {
                columnWidth: 0,
                itemSelector: '.item'
            });
            var $grid = jQuery('.item').imagesLoaded(function() {
                // init Masonry after all images have loaded
                $grid.masonry({
                    // options...
                });
            });
            jQuery('.list_one').waypoint(function() {
                jQuery('.list_one').addClass('animated fadeIn');
            }, {
                offset: '75%'
            });
        }
    });
});
(function($) {
    'use strict';
    $(window).load(function() {
        $('.masonry').masonry({
            columnWidth: '.grid-sizer',
            gutter: '.gutter-sizer',
            itemSelector: '.item'
        });
    });
}(jQuery));

我错过了什么吗？

以下是实际网站：http://lifeto.cafe24.com/xe/request

Answer 1

以下是jscroll和$('.infinite-scroll').jscroll({ autoTrigger: true, loadingHtml: '<img class="center-block" src="/imgs/icons/loading.gif" alt="Loading..." />', padding: 0, nextSelector: '.pagination li.active + li a', contentSelector: 'div.infinite-scroll', callback: function() { /* remove pagination */ $('.link-pagination').remove(); /* get blocks from jscroll-added div */ var $moreBlocks=jQuery('.jscroll-added').find('.item'); /* do masonry reload with new blocks */ $('#wall').masonry().append($moreBlocks).masonry('appended',$moreBlocks).masonry('reloadItems'); /* remove unused div*/ $('.jscroll-added').remove(); } });组合的工作示例：

 <div class="form-group ">
  <label class="control-label col-sm-3 col-xs-3 col-md-3 col-lg-3" for="email">E-mail</label><?php echo @$_SESSION['ctform']['email_error'] ?>
  <div class="col-sm-7 col-xs-7 col-md-7 col-lg-7">
   <input class="form-control" id="email" name="ct_email" type="text" value="<?php echo htmlspecialchars(@$_SESSION['ctform']['ct_email']) ?>"/>
  </div>
 </div>

可能会更好，但无论如何都可行

动态添加的元素不受masonry.js的约束

1 个答案: