Question

我正在使用jQuery Woodmark Plugin 自动输入并将列表项拟合到浏览器窗口。我正在尝试使用jQuery JScroll Plugin 允许无限滚动，但Woodmark在实现时会中断。

我正在使用Laravel，所以这是我的刀片视图

<ul class="list-grid">
    <div class="scroller">
        @foreach($activities as $activity)
            <li>
                @include('php_includes.activities.activity', ['route' => 'activity-global','user_id' => null])
            </li>
        @endforeach 
        {{ $activities->links() }}
    </div>
</ul>

我在我的页脚中使用我的JS来使Woodmark工作是这样的：

<script type="text/javascript">
(function ($){
  $(function() {
    var $handler = $('.list-grid li');

    $handler.wookmark({
        // Prepare layout options.
         align: 'center',
         autoResize: true,
         comparator: null,
         container: $('html'),
         direction: undefined,
         ignoreInactiveItems: true,
         itemWidth: 560,
         fillEmptySpace: false,
         flexibleWidth: true,
         offset: 8,
         onLayoutChanged: undefined,
         outerOffset: 0,
         possibleFilters: [],
         resizeDelay: 50,
         verticalOffset: undefined
    });
  });
})(jQuery);
</script>

这一切都很好，但是当我尝试添加JScroll时，附加的项目（？page = 2）与原始项目（？page = 1）重叠，而Pagemark = 2项目的Woodmark重叠。

我对JScroll的JS是这样的：

$(document).ready(function(){
//hides the default paginator
    $('ul.pagination:visible:first').hide();

    $('div.scroller').jscroll({
        autoTrigger: true,
        nextSelector: '.pagination li.active + li a',
        contentSelector: 'div.scroller',
        animate: true,
        loadingHtml: '<div class="page-loading"><i class="uk-icon-spin uk-icon-spinner"></i></div>',
        callback: function() {

            //again hide the paginator from view
            $('ul.pagination:visible:first').hide();

        }
    });
});

我是jQuery / JavaScript的新手。有谁知道为什么会这样，以及如何解决？

与Wookmark一起工作的JScroll不起作用

0 个答案: