Implementação de cascata de caixas com jQuery3Tipos de casos

1. CascataÉ um caso comum, aqui principalmente explicamos como implementar a função de cascata usando jQuery!

Introdução: Frequentemente, vemos muitos sites com a função de cascata, como Taobao, JD.com e outros produtos...

Para realizá-lo, primeiramente consideramos algumas questões:1Obter dados 2Modo de disposição 3Como implementar a disposição

Na verdade, há uma função central no Waterfall que usa alinhamento absoluto

Vamos analisar passo a passo:

Este é o layout html, o layout css pode ser configurado por você mesmo, desde que o grid box tenha alinhamento absoluto e o elemento pai tenha alinhamento relativo! Referências de código estão a seguir

A seguir é a parte do script

Este método pode obter o índice da imagem em ordem através de um loop for, e continuamente alterar o valor do top e do left no estilo css!

Quando obtemos os recursos das imagens, às vezes a altura das imagens não é consistente, se continuarmos a organizar em ordem, a última imagem exibida, a disposição não é uniforme, o efeito não é bom!

Continue para baixo:

Podemos usar outra maneira para inserir a imagem na coluna mais curta da linha atual, solucionando assim o problema!

A seguir, vamos olhar principalmente para o código jQuery:

Bem, agora já resolvemos o problema do Waterfall de duas maneiras, mas ainda temos um problema por resolver,那就是 o grande motivo pelo qual o Waterfall é tão grande é porque a quantidade de imagens é grande, e escrever html uma por uma não é muito baixo!

Continue para baixo:

A seguir, apresentamos um método de obter dados do json no background usando o modelo do motor de busca para resolver esse problema!

1Tudo o que precisamos construir é uma caixa html!

2A seguir, a caixa está construída, os dados precisam ser obtidos, isso depende dela!

3A seguir são duas bibliotecas js, que podem ser baixadas na internet!

4A seguir é a parte específica do js, precisa ser analisada com atenção!

Inclui, chamar o conteúdo do modelo do motor de busca, ligar funções, converter em objeto jQuery!

Este capítulo inclui principalmente: obter dados através de AJAX para o json

Este capítulo inclui principalmente: percorrer funções, encontrar a disposição da coluna mais curta!

Além disso, este também é o quarto capítulo:

O último passo é: a função de rolagem, esta parte recomenda usar console.log no background para facilitar a compreensão!

Embora o último método seja complicado, uma vez concluído, podemos usá-lo muitas vezes e obter muitos dados automaticamente!

A seguir, apresentamos o código original para que todos testem bem, não esqueçam de alterar as imagens e os caminhos!　

Método original do primeiro:　

!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;*/
   /*borda: 1px sólido vermelho;*/
   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 soma = 0;
    //percorrer a altura total das pessoas acima
    for(var i = $(this).index() - 3 ; i >= 0 ; i-=3{
     soma += $grids.eq(i).outerHeight() + 20;
    }
    console.log($(this).index());
    $(this).css({
     "topo" : soma,
     "esquerda" : ( 3) * 270
    }
   });
   }
 </script>
</body>
</html>

Método original do segundo:　

!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">
  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">
 // Define variables and objects
  // Get the content sent from the engine template and convert it to a string using jQuery
  var templateString = $("#grid_template").html();
  // Bind the converted string to the compileFunction function!
  var compileFunction = _.template(templateString);//_.template() returns a function!
  // console.log(typeof(compileFunction)); //function
  //Convert to jQuery object for later use of jQuery methods
  var $waterfall = $("#waterfall");
  var $loading = $(".loading");
  //Cascata de três colunas, a altura total de cada coluna
  var colHeight = [0,0,0];
  // Este é o array de alturas de três colunas, independente dos valores dentro, representa a ordem do índice
  // console.log(colHeight);
 // Obter dados
  //Sinal de controle
  var page = 1;
  getJSONandRender(page());
  function getJSONandRender(page){
   // Para melhorar a experiência do usuário
   $loading.show();
   //Enviar solicitação ajax
   $.get("json/json + page + ".txt",function(data){ //Emitir string 
    //Converter em objeto
    var dataObj = eval("(" + data + )");  //Analisar dados ajax, converter em objeto!
    //Não há mais dados
    // dataObj.news.length vem do json de trás
    if(dataObj.news.length == 0){
     $loading.show().html("Não há mais");
     return; //Aqui, o lock também será encerrado
    }
 // Função de percorrimento, obter dinamicamente o valor do índice com base na posição de alinhamento absoluto!
    _.each(dataObj.news,function(dictionary){ //Cada vez que percorrer, execute a função!     
     //Este é o construtor integrado do sistema
     var image = new Image(); //Alocar espaço de memória para instanciar um objeto
     // Após a instância do objeto, o construtor executará imediatamente qualquer código contido nele
     image.src = dictionary.imgurl;
     //Nós agora transformamos image em objeto jQuery e ligamos eventos
     $(image).load(function(){
      // console.log(dictionary.imgurl + "Carregamento concluído";      
      var domString = compileFunction(dictionary);
      // console.log(typeof(domString));
      var $grid = $(domString);
      $waterfall.append($grid);
      //De acordo com o algoritmo de cascata, configure seu left e top
      // O valor mínimo
      minValue = _.min(colHeight);
      // Posição do menor valor!
      minIndex = _.indexOf(colHeight,minValue);
      $grid.css({
       "top" : minValue
       "left" : minIndex * 270
      });
      //Alterar o valor do array de alturas totais das colunas
      colHeight[minIndex] += $grid.outerHeight(); + 10;
      //Faça a caixa grande ajustar a altura da maior coluna
      $waterfall.css("height",_.max(colHeight));
      //Ocultar texto de carregamento
      $loading.hide();
     });
    });
    lock = true;
   });
  }
  var lock = true;
  //Ouvinte de rolagem
  $(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>

Isso é o conteúdo completo deste artigo, esperamos que ajude na aprendizagem de todos e esperamos que todos apoiem o Tutorial Yelling.

Declaração: O conteúdo deste artigo é de propriedade da Internet, pertence ao proprietário original, foi contribuído e carregado voluntariamente pelos usuários da Internet, este site não possui direitos autorais, não foi editado manualmente e não assume responsabilidades legais. Se você encontrar conteúdo suspeito de direitos autorais, por favor, envie um e-mail para: notice#w.3Avisos: O conteúdo deste artigo foi extraído da internet, pertence ao autor original, foi carregado por usuários da internet, este site não possui direitos autorais, não foi editado manualmente e não assume responsabilidades legais. Se você encontrar conteúdo suspeito de direitos autorais, por favor, envie um e-mail para: notice#w, fornecendo provas relevantes. Assim que verificado, o conteúdo suspeito de infringement será removido imediatamente.

Tutoriais básicos