类似懒加载的js功能

 <!-- 显示15条数据 -->
 <ul class="list" pagesize="15">
     <li>
         <div class="">
             <img v-bind:src="" alt="" />
         </div>
     </li>
 　　<li>...</li>
 　　<li>...</li>
 　　....
 </ul>

1，先在ul显示设置15条的数据，pagesize="15";然后插入下面的jq代码即可，不过这貌似不是懒加载的样子，而是隐藏了后面的列表，点击再才又加载多15条数据。

 <!-- 显示更多 -->
 <script type="text/javascript">
     (function () {
         var showMoreNChildren = function ($children, n) {
             //显示某jquery元素下的前n个隐藏的子元素
             var $hiddenChildren = $children.filter(":hidden");
             var cnt = $hiddenChildren.length;
             for (var i = 0; i < n && i < cnt ; i++) {
                 $hiddenChildren.eq(i).show();
             }
             return cnt - n;//返回还剩余的隐藏子元素的数量
         }

         $.showMore = function (selector) {
             if (selector == undefined) { selector = ".list" }
             //对页中现有的class=list的元素，在之后添加显示更多条，并绑定点击行为
             $(selector).each(function () {
                 var pagesize = $(this).attr("pagesize") || 10;
                 var $children = $(this).children();
                 if ($children.length > pagesize) {
                     for (var i = pagesize; i < $children.length; i++) {
                         $children.eq(i).hide();
                     }

                     $("<button class='more' >显示更多 >>></button>").insertAfter($(this)).click(function () {
                         if (showMoreNChildren($children, pagesize) <= 0) {
                             //如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
                             $(this).hide();
                         };
                     });
                 }
             });
         }
     })();

     //调用显示更多插件。参数是标准的 jquery 选择符
     $.showMore("list");
 </script>