Difference between revisions of "Team:Tianjin/Resources/JS:find"

(Created page with "$(function(){ →‎顶部nav: var swiper = new Swiper('.nav-container', { slidesPerView: 'auto', paginationClickable: true }); $(".nav-ul .swiper-sli...")
 
 
Line 1: Line 1:
−
$(function(){
+
$(function() {
−
+
 
−
/*顶部nav*/
+
        /*顶部nav*/
−
var swiper = new Swiper('.nav-container', {
+
        var swiper = new Swiper('.nav-container', {
−
        slidesPerView: 'auto',
+
                slidesPerView: 'auto',
−
        paginationClickable: true
+
                paginationClickable: true
−
    });
+
        });
−
    $(".nav-ul .swiper-slide").click(function(){
+
        $(".nav-ul .swiper-slide").click(function() {
−
    $(this).addClass("active-li").siblings().removeClass("active-li");
+
                $(this).addClass("active-li").siblings().removeClass("active-li");
−
    });
+
        });
−
   
+
 
−
   
+
        /*瀑布流初始化设置*/
−
   
+
        var $grid = $('.grid').masonry({
−
   
+
                itemSelector: '.grid-item',
−
    /*瀑布流初始化设置*/
+
                gutter: 10
−
var $grid = $('.grid').masonry({
+
        });
−
itemSelector : '.grid-item',
+
        // layout Masonry after each image loads
−
gutter:10
+
        $grid.imagesLoaded().done(function() {
−
    });
+
                console.log('uuuu===');
−
    // layout Masonry after each image loads
+
                $grid.masonry('layout');
−
$grid.imagesLoaded().done( function() {
+
        });
−
console.log('uuuu===');
+
        var pageIndex = 0;
−
  $grid.masonry('layout');
+
        var dataFall = [];
−
});
+
        var totalItem = 10;
−
  var pageIndex = 0 ; var dataFall = [];
+
        $(window).scroll(function() {
−
  var totalItem = 10;
+
                $grid.masonry('layout');
−
  $(window).scroll(function(){
+
                 var scrollTop = $(this).scrollTop();
−
  $grid.masonry('layout');
+
                var scrollHeight = $(document).height();
−
                 var scrollTop = $(this).scrollTop();var scrollHeight = $(document).height();var windowHeight = $(this).height();
+
                var windowHeight = $(this).height();
−
                 if(scrollTop + windowHeight == scrollHeight){
+
                 if (scrollTop + windowHeight == scrollHeight) {
 
                         $.ajax({
 
                         $.ajax({
−
              dataType:"json",
+
                                dataType: "json",
−
        type:'get',
+
                                type: 'get',
−
        url:'./article.json',
+
                                url: './article.json',
−
            success:function(result){
+
                                success: function(result) {
−
            dataFall = result.result.article;
+
                                        dataFall = result.result.article;
−
            setTimeout(function(){
+
                                        setTimeout(function() {
−
            appendFall();
+
                                                appendFall();
−
            },500)
+
                                        },
−
            },
+
                                        500)
−
            error:function(e){
+
                                },
−
            console.log('请求失败')
+
                                error: function(e) {
−
            }
+
                                        console.log('请求失败')
−
           
+
                                }
−
                  })
+
 
−
               
+
                        })
 +
 
 
                 }
 
                 }
−
               
 
−
        }) 
 
−
 
  
−
          
+
         })
−
         function appendFall(){
+
 
−
          $.each(dataFall, function(index ,value) {
+
         function appendFall() {
−
          var dataLength = dataFall.length;
+
                $.each(dataFall,
−
          $grid.imagesLoaded().done( function() {
+
                function(index, value) {
−
        $grid.masonry('layout');
+
                        var dataLength = dataFall.length;
−
          });
+
                        $grid.imagesLoaded().done(function() {
−
      var detailUrl;
+
                                $grid.masonry('layout');
−
        var $griDiv = $('<div class="grid-item item">');
+
                        });
−
        var $img = $("<img class='item-img'>");
+
                        var detailUrl;
−
        $img.attr('src',value.articlePic).appendTo($griDiv);
+
                        var $griDiv = $('<div class="grid-item item">');
−
        var $section = $('<section class="section-p">');
+
                        var $img = $("<img class='item-img'>");
−
        $section.appendTo($griDiv);
+
                        $img.attr('src', value.articlePic).appendTo($griDiv);
−
        var $p1 = $("<p class='title-p'>");
+
                        var $section = $('<section class="section-p">');
−
        $p1.html(value.title).appendTo($section);
+
                        $section.appendTo($griDiv);
−
        var $p2 = $("<p class='name-p'>");
+
                        var $p1 = $("<p class='title-p'>");
−
        $p2.html(value.name).appendTo($section);
+
                        $p1.html(value.title).appendTo($section);
−
        var $p3 = $("<p class='price-p'>");
+
                        var $p2 = $("<p class='name-p'>");
−
        $p3.html(value.commentCount).appendTo($section);
+
                        $p2.html(value.name).appendTo($section);
−
        var $items = $griDiv;
+
                        var $p3 = $("<p class='price-p'>");
−
  $items.imagesLoaded().done(function(){
+
                        $p3.html(value.commentCount).appendTo($section);
−
$grid.masonry('layout');
+
                        var $items = $griDiv;
−
            $grid.append( $items ).masonry('appended', $items);
+
                        $items.imagesLoaded().done(function() {
−
})
+
                                $grid.masonry('layout');
−
          });
+
                                $grid.append($items).masonry('appended', $items);
 +
                        })
 +
                });
 
         }
 
         }
−
   
+
 
−
   
+
−
   
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
−
+
 
})
 
})

Latest revision as of 04:02, 27 August 2017

$(function() { 

       /*顶部nav*/
       var swiper = new Swiper('.nav-container', {
               slidesPerView: 'auto',
               paginationClickable: true
       });
       $(".nav-ul .swiper-slide").click(function() {
               $(this).addClass("active-li").siblings().removeClass("active-li");
       });

       /*瀑布流初始化设置*/
       var $grid = $('.grid').masonry({
               itemSelector: '.grid-item',
               gutter: 10
       });
       // layout Masonry after each image loads
       $grid.imagesLoaded().done(function() {
               console.log('uuuu===');
               $grid.masonry('layout');
       });
       var pageIndex = 0;
       var dataFall = [];
       var totalItem = 10;
       $(window).scroll(function() {
               $grid.masonry('layout');
               var scrollTop = $(this).scrollTop();
               var scrollHeight = $(document).height();
               var windowHeight = $(this).height();
               if (scrollTop + windowHeight == scrollHeight) {
                       $.ajax({
                               dataType: "json",
                               type: 'get',
                               url: './article.json',
                               success: function(result) {
                                       dataFall = result.result.article;
                                       setTimeout(function() {
                                               appendFall();
                                       },
                                       500)
                               },
                               error: function(e) {
                                       console.log('请求失败')
                               }

                       })

               }

       })

       function appendFall() {
               $.each(dataFall,
               function(index, value) {
                       var dataLength = dataFall.length;
                       $grid.imagesLoaded().done(function() {
                               $grid.masonry('layout');
                       });
                       var detailUrl;
var $griDiv = $('
'); 
                       var $img = $("<img class='item-img'>");
                       $img.attr('src', value.articlePic).appendTo($griDiv);
                       var $section = $('<section class="section-p">');
                       $section.appendTo($griDiv);
var $p1 = $("

"); $p1.html(value.title).appendTo($section); var $p2 = $("<p class='name-p'>"); $p2.html(value.name).appendTo($section); var $p3 = $("<p class='price-p'>"); $p3.html(value.commentCount).appendTo($section); var $items = $griDiv; $items.imagesLoaded().done(function() { $grid.masonry('layout'); $grid.append($items).masonry('appended', $items); }) }); } })