jQuery를 사용하여 스크롤링 퍼블리싱 구현3사례

1. 피라미드이는 우리가 흔히 볼 수 있는 예시입니다. 여기서는 주로 jQuery 방식으로 피라미드 기능을 구현하는 방법에 대해 설명합니다!

서론: 우리는 자주 탐보는 많은 웹사이트의 피라미드 기능을 볼 수 있습니다. 예를 들어, 탕보, 진두 등의 상품들이 있습니다...

그를 실현하기 위해 먼저 몇 가지 문제를 고려해야 합니다:1、获取到数据 2、排列的方式 3、如何实现排列

其实，在瀑布流里有个核心的功能就是用到了绝对定位

我们逐步深入分析：

这是html的布局，css布局可以自己设置，只要保证grid盒子有绝对定位，其父元素有相对定位即可！后面有参考代码

下面是script部分

这种方式，可以通过for循环按照顺序获取图片的索引值，然后不断的更改其css样式中的top值和left值！

在我们获取图片的资源时，有的时候图片的高度是不一致的，如果一直按照顺序排列，最后的图片显示，排列不整齐，就会效果不佳！

继续往下看：

我们可以通过另一种方法，来实现图片插入当前列最短的一列，可以解决这个问题！

下面我们来主要看一下jquery的代码：

好了，现在我们已经通过两种方式解决了瀑布流这个问题，但是我们还有个问题没有解决，那就是做瀑布流很大的原因是因为图片的量比较大，我们一个一个写html是不是有点太low了！

继续往下看：

下面介绍一种利用引擎模板来获取json后台的数据的方式，实现这个问题！

1、我们只需要搭建一个html盒子即可！

2、盒子搭建好了，数据要获取啊，就靠它！

3、这是两个js库，在网上可下载到！

4、下面是具体的js部分，需要仔细分析了！

主要包括，调用搜索引擎模板里获取到的内容，绑定函数，转换成jquery对象！

这一部分主要包括：通过ajax向json请求数据

这一部分主要包括：遍历函数，进行寻找最短的列排列格子！

还有这一些，也是第四部分：

最后一步是：滚动的函数，这一部分建议使用console.log在后台验证一下，更容易理解！

虽然最后一种办法麻烦，但是这一次完成，我们就可以使用很多次，并且自动获取很多数据！

下面给大家附上原码，大家好好测试一下，不要忘记更改图片和路径哦！　

第一种方法原码：　

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   /*height: 1000px;*/
   /*border: 1px solid red;*/
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
 </style>
</head>
<body>
 <div class="waterfall">
  <div class="grid">
   <img src="images/0.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/1.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/2.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/3.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/4.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/5.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/6.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/7.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/8.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/9.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/10.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/11.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/12.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
 </div>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript">
  window.onload = function(){
   //得到所有的grid
   $grids = $(".grid");
   //
   $grids.each(function(){
    var sum = 0;
    //遍历它上面的人的总高度
    for(var i = $(this).index(), - 3 ; i >= 0 ; i-=3{
     sum += $grids.eq(i).outerHeight(), + 20;
    }
    console.log($(this).index());
    $(this).css({
     "top" : sum,
     "left" : ($(this).index() % 3) * 270
    }
   });
   }
 </script>
</body>
</html>

第二种方法原码：　

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
 </style>
</head>
<body>
 <h3>瀑布流的算法2，看哪个列最矮，插入在哪个列</h3>
 <div class="waterfall">
  <div class="grid">
   <img src="images/0.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/1.png" alt="" />
   <p>内容内容内容内容内容内内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/2.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/3.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/4.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/5.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/6.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/7.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/8.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/9.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/10.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/11.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="grid">
   <img src="images/12.png" alt="" />
   <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
 </div>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript" src="js/underscore.js"></script>
 <script type="text/javascript">
  window.onload = function(){
   //每个格格不一定往自己序号%3这个列插入，看哪个列目前最矮，插在哪里=
   //得到所有的grid
   $grids = $(".grid");  
    //用一个数组存储当前三个列的总高度
    var colHeight = [0,0,0]; 
    // console.log(colHeight);
    // 遍历小格格
    $grids.each(function(){
     //找一下当前的最短列是谁
     var minValue = _.min(colHeight); //colHeight里面的最小的值！
     //看一下最短列出现在index几的位置上
     var minIndex = _.indexOf(colHeight,minValue);//最短的值的下标
    // console.log(minIndex);
     $(this).css({
      "top" : minValue ,
      "left" : minIndex * 270
     });
     colHeight[minIndex]; += $(this).outerHeight(); + 20;
     // console.log(colHeight[minIndex]);
    }
   }
 </script>
</body>
</html>

第三种方法原码：　

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>Document</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   background-color: #ccc;
  }
  .waterfall{
   width: 790px;
   margin: 0 auto;
   position: relative;
  }
  .grid{
   position: absolute;
   width: 230px;
   background-color: white;
   padding: 10px;
   border-radius: 15px;
  }
  .grid img{
   width: 230px;
  }
  .grid .title{
   font-weight: bold;
   font-size: 18px;
   line-height: 32px;
  }
  .grid .neirong{
   line-height: 150%;
   font-size: 14px;
   margin-bottom: 20px;
  }
  .grid .zuozhe{
   float: right;
   color:orange;
   font-size: 12px;
  }
  .loading{
   margin: 0 auto;
   width: 400px;
   line-height: 30px;
   text-align: center;
   font-size: 14px;
   background-color: gold;
   color:white;
  }
 </style>
</head>
<body>
 <div class="waterfall" id="waterfall">
 </div>
 <div class="loading">
  로드 중...
 </div>
 <script type="text/template" id="grid_template">
  <div class="grid">
   <img src="<%=imgurl%>" alt="" />
   <p class="title"><%=title%></p>
   <p class="neirong"><%=content%></p>
   <p class="zuozhe"><%=author%></p>
  </div>
 </script>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript" src="js/underscore.js"></script>
 <script type="text/javascript">
 // 변수와 객체를 정의합니다
  // 엔진 템플릿에 있는 내용을 가져와 jQuery로 문자열로 변환합니다
  var templateString = $("#grid_template").html();
  // 변환된 문자열을 compileFunction 함수에 바인딩합니다!
  var compileFunction = _.template(templateString);//_.template()은 함수를 반환합니다!
  // console.log(typeof(compileFunction)); //function
  //jQuery 객체로 변환하여 나중에 jQuery 메서드를 사용하려고 합니다
  var $waterfall = $("#waterfall");
  var $loading = $(".loading");
  //세 개의 열의 전체 높이
  var colHeight = [0,0,0];
  // 이것은 세 개의 열의 높이 배열로, 내부의 값과 관계없이 index의 순서를 나타냅니다
  // console.log(colHeight);
 // 데이터 가져오기
  //시그널링
  var page = 1;
  getJSONandRender(page());
  function getJSONandRender(page){
   // 사용자 경험을 향상시키기 위해
   $loading.show();
   //ajax 요청 발행
   $.get("json/json + page + ".txt",function(data){ //문자열 출력 
    //객체로 변환
    var dataObj = eval("(" + 데이터 + )");  //ajax 데이터를 해석하고 객체로 변환합니다!
    //더 이상 데이터가 없습니다
    // dataObj.news.length은 백엔드 json에서 옵니다
    if(dataObj.news.length == 0){
     $loading.show().html(" 더 이상 없습니다 ");
     return; //여기서 멈추면, lock도 멈춥니다
    }
 // 반복 함수를 통해 인덱스 값에 따라 절대 위치를 기반으로 배치합니다!
    _.each(dataObj.news,function(dictionary){ //각 번째 반복마다 함수를 한 번 실행합니다!     
     //이것은 시스템 내장 생성자입니다
     var image = new Image(); //객체를 인스턴스화하면 메모리 공간이 할당됩니다
     // 객체가 인스턴스화되면, 생성자는 즉시 포함된 모든 코드를 실행합니다
     image.src = dictionary.imgurl;
     //이제 image을 jQuery 객체로 변환하고 이벤트를 바인딩합니다
     $(image).load(function(){
      // console.log(dictionary.imgurl + "로드 완료"      
      var domString = compileFunction(dictionary);
      // console.log(typeof(domString));
      var $grid = $(domString);
      $waterfall.append($grid);
      //瀑布流 알고리즘에 따라, left와 top을 설정합니다
      // 최소값
      minValue = _.min(colHeight);
      // 최소 값의 위치!
      minIndex = _.indexOf(colHeight,minValue);
      $grid.css({
       "top" : minValue
       "left" : minIndex * 270
      });
      //총 열 높이 배열의 값을 변경합니다
      colHeight[minIndex]; += $grid.outerHeight(); + 10;
      //대 박스의 높이는 가장 높은 열에 따라 설정됩니다
      $waterfall.css("height",_.max(colHeight));
      //로딩 텍스트 숨기기
      $loading.hide();
     });
    });
    lock = true;
   });
  }
  var lock = true;
  //스크롤 리스너
  $(window).scroll(function(){
   if(!lock) return;
   var rate = $(window).scrollTop(); / ($(document).height() - $(window).height());
   if(rate >= 0.7{
    page ++;
    getJSONandRender(page());
    lock = false;
   }
  }
 </script>
</body>
</html>

이것이 본 문서의 전체 내용입니다. 많은 도움이 되길 바라며, 다른 사람들도 지지해 주시기를 바랍니다.

언급: 본 내용은 인터넷에서 가져왔으며, 저작권자는 모두 소유합니다. 인터넷 사용자가 자발적으로 기여하고 업로드한 내용으로, 이 웹사이트는 소유권을 가지지 않으며, 인공적인 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 문제가 있을 경우 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com에 (메일을 보내면, #을 @으로 변경하십시오.) 신고하시고 관련 증거를 제공하시면, 사실을 확인하면 해당 도메인의 내용을 즉시 삭제하겠습니다。

기본 가이드

좋아하는 것