无限卷轴不与砌体一起使用?

时间:2014-07-15 13:04:36

标签: php jquery infinite-scroll

我正在为我的博客使用 masonry 样式。我想在我的博客中添加无限滚动

我正在使用自定义php代码(不使用任何框架)。

我尝试使用此网站上的无限滚动jquery:http://infiniteajaxscroll.com/

它对我不起作用。

这是我的代码:

 <div id="envor-posts-masonry">

              <?php
                require 'blog_function.php';
                $query = "Select * FROM article ORDER BY post_date DESC ";
                $posts = get_posts($query);   
                foreach($posts as $post)
                {
             ?>
              <article class="post post-masonry">
                <div class="inner">
             <header>
                  <h3><i class="fa fa-pencil"></i> <a href="blog_single_view.php?post_id=<?php echo $post['post_id']; ?>"><?php echo $post['post_title']; ?></a></h3>
                  <p>posted on <a href="">
                 <?php 
                    $timestamp = $post['post_date'];
                    echo $data = date('d-m-Y',strtotime($timestamp)); ?></a> <br> by <a href=""><?php echo $post['author']; ?></a></p>
                </header>
                <p><?php $content=$post['post_content']; 
                         $string = strip_tags($content);
                          if (strlen($string) > 500) {
                          $stringCut = substr($string, 0, 500);
                          $string = substr($stringCut, 0, strrpos($stringCut, ' ')).'....'; 
                      }
                      echo $string;
                ?></p>
                <p><a href="blog_single_view.php?post_id=<?php echo $post['post_id']; ?>" class="envor-btn envor-btn-small envor-btn-secondary-border">read the rest <i class="fa fa-arrow-circle-right"></i></a></p>
                </div>
              </article>
              <?php
            }
            ?>

 <script src="../js/jquery-ias.min.js"></script>    
    <script type="text/javascript">
              $('document').ready(function() {
                  var $container = $('#posts-masonry');
                   $container.imagesLoaded(function() {
                      $container.masonry({
                        itemSelector: '.post-masonry',
                         isFitWidth: false,
                         isAnimated: true
                      })
                    });
                  $.ias({
                      container: '#posts-masonry',
                      item: '.post-masonry',
                      pagination: '#pagination',
                      next: '.next',
                      onLoadItems: function(items) {
                          var $newElems = jQuery(items).css({ opacity: 0 });
                          $newElems.imagesLoaded(function() {
                              $newElems.animate({ opacity: 1 });
                              $container.masonry('appended', $newElems, true);
                          });
                          return true;
                      },
                  });

                  $(window).resize(function() {
                    $container.masonry('bindResize');

                  });

              });
</script>

任何人都可以帮我吗??

提前致谢。

0 个答案:

没有答案