English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Posizione attuale
  2. Pagina principale
  3. Note di esperienza
  4. Testo principale

利用jQuery实现瀑布流3种案例

Flusso a cascataÈ un caso comune, qui si spiega principalmente come implementare la funzione di flusso a cascata utilizzando jQuery!

Introduzione: spesso vediamo molte funzioni di flusso a cascata sui siti web, come Taobao, JD e altri prodotti...

Per realizzarlo, prima di tutto consideriamo alcuni problemi:1, ottenere i dati 2, il modo di ordinamento 3, come realizzare l'ordinamento

In realtà, nel flusso a cascata, c'è una funzione nucleare che utilizza il posizionamento assoluto

Analizziamo gradualmente:

Questo è il layout html, il layout css può essere configurato da soli, assicurarsi solo che la scatola grid abbia la posizionamento assoluto, il suo elemento padre ha la posizionamento relativo! Ci sono esempi di codice di riferimento più avanti

Di seguito è la parte di script

Questo metodo può ottenere l'indice dell'immagine in ordine tramite un ciclo for, quindi modificare continuamente i valori di top e left dello stile css!

Quando otteniamo le risorse delle immagini, a volte l'altezza delle immagini non è uniforme, se si continua a ordinare in ordine, l'ultima immagine visualizzata, l'ordinamento non è regolare, il che può portare a un effetto scadente!

Continuate a leggere:

Possiamo utilizzare un altro metodo per inserire le immagini nella colonna più corta, risolvendo questo problema!

Di seguito, analizziamo principalmente il codice jQuery:

Bene, ora abbiamo risolto questo problema di cascata in due modi, ma abbiamo ancora un problema da risolvere, ovvero la ragione principale per cui la cascata è grande è perché la quantità di immagini è grande, scrivere html una per una non è un po' basso?

Continuate a leggere:

Di seguito, presentiamo un modo per ottenere dati JSON dietro l'engine modello, per realizzare questo problema!

1, dobbiamo costruire una scatola html!

2, la scatola è stata costruita, i dati devono essere raccolti, dipende da essa!

3, questo sono due librerie js, sono scaricabili su internet!

4, di seguito è la parte specifica di js, è necessario analizzare attentamente!

Incluso, chiamare il contenuto del modello del motore di ricerca, collegare la funzione, trasformare in oggetto jQuery!

Questa parte include principalmente: richieste di dati JSON tramite AJAX

Questa parte include principalmente: funzioni di scansione, per trovare la griglia più corta!

Ecco alcuni altri, anche la quarta parte:

L'ultimo passo è: la funzione di scorrimento, questo pezzo si consiglia di usare console.log per verificare in background, è più facile capire!

Anche se l'ultimo metodo è complicato, una volta completato, possiamo usarlo molte volte e ottenere molti dati automaticamente!

Di seguito, forniamo il codice originale, fate bene a testarlo e non dimenticatevi di modificare le immagini e i percorsi!　

Primo metodo: codice originale:　

<!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>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/1.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/2.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/3.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/4.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/5.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/6.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/7.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/8.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/9.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/10.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/11.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/12.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
 </div>
 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 <script type="text/javascript">
  window.onload = function(){};
   //Ottieni tutte le griglie
   $grids = $(".grid");
   //
   $grids.each(function(){});
    var sum = 0;
    //esegui una scansione totale dell'altezza delle persone sopra
    per(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>
　

Secondo metodo in codice originale:　

<!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>Algoritmo della cascata 2, guardare quale colonna è più bassa e inserirla nella colonna corrispondente</h3>
 <div class="waterfall">
  <div class="grid">
   <img src="images/0.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/1.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/2.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/3.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/4.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/5.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/6.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/7.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/8.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/9.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/10.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/11.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</p>
  </div>
  <div class="grid">
   <img src="images/12.png" alt="" />
   <p>Contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto contenuto</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(){};
   //Non tutte le griglie vengono inserite nella colonna con il proprio numero di sequenza %3, guardare quale colonna è più bassa e dove inserirla=
   //Ottieni tutte le griglie
   $grids = $(".grid");  
    //Utilizza un array per memorizzare l'altezza totale delle tre colonne correnti
    var colHeight = [0,0,0]; 
    // console.log(colHeight);
    //Esplora le piccole griglie
    $grids.each(function(){});
     //Trova quale colonna è la più corta attualmente
     var minValue = _.min(colHeight); //Il valore più piccolo all'interno di colHeight!
     //Guarda la posizione dell'indice della colonna più corta
     var minIndex = _.indexOf(colHeight,minValue);//Indice del valore più corto
    // console.log(minIndex);
     $(this).css({
      "top" : minValue ,
      "left" : minIndex * 270
     });
     colHeight[minIndex] += $(this).outerHeight() + 20;
     // console.log(colHeight[minIndex]);
    }
   }
 </script>
</body>
</html>
　

Metodo terzo in codice originale:　

<!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">
  Caricamento in corso...
 </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">
 // Definisci variabili e oggetti
  // Ottieni il contenuto del template dell'engine e convertilo in stringa usando jQuery
  var templateString = $("#grid_template").html();
  // Leggi la stringa convertita e assegnala alla funzione compileFunction!
  var compileFunction = _.template(templateString); // _.template() restituisce una funzione!
  // console.log(typeof(compileFunction)); // function
  // convertito in oggetto jQuery per l'uso delle sue funzioni
  var $waterfall = $("#waterfall");
  var $loading = $(".loading");
  // tre colonne a cascata, altezza totale di ciascuna colonna
  var colHeight = [0,0,0];
  // Questo è l'array delle altezze delle tre colonne, indipendentemente dai valori all'interno, rappresenta l'ordine dell'indice
  // console.log(colHeight);
 // Ottenere dati
  // Semaforo
  var page = 1;
  getJSONandRender(page);
  function getJSONandRender(page){
   // Per migliorare l'esperienza utente
   $loading.show();
   // Richiesta ajax
   $.get("json/json" + page + ".txt",function(data){ // Output stringa 
    // Trasforma in oggetto
    var dataObj = eval("(" + data + ")");  // Analizza i dati ajax, trasformali in un oggetto!
    // Non ci sono più dati
    // dataObj.news.length viene dal json di backend
    if(dataObj.news.length == 0){
     $loading.show().html("Non ci sono più");
     return; // Qui si ferma anche il lock
    }
 // Funzione di scansione, ottiene il valore dell'indice in base alla posizione assoluto
    _each(dataObj.news,function(dictionary){ // Per ogni iterazione, eseguiamo la funzione!     
     // Questo è il costruttore integrato del sistema
     var image = new Image(); // Istanziamo un oggetto assegnando spazio in memoria
     // Dopo che l'oggetto è stato istanziato, il costruttore esegue immediatamente qualsiasi codice contenuto
     image.src = dictionary.imgurl;
     // Ora convertiamo l'immagine in un oggetto jQuery e ne bindiamo gli eventi
     $(image).load(function(){
      // console.log(dictionary.imgurl + "caricato");      
      var domString = compileFunction(dictionary);
      // console.log(typeof(domString));
      var $grid = $(domString);
      $waterfall.append($grid);
      // Secondo l'algoritmo del waterfallo, impostare left e top
      // Valore minimo
      minValue = _.min(colHeight);
      // Posizione del valore minimo!
      minIndex = _.indexOf(colHeight,minValue);
      $grid.css({
       "top" : minValue
       "left" : minIndex * 270
      });
      // Modificare il valore dell'array totale delle altezze delle colonne
      colHeight[minIndex] += $grid.outerHeight() + 10;
      // Far diventare la scatola grande secondo la colonna più alta
      $waterfall.css("height",_.max(colHeight));
      // Nascondere il testo di loading
      $loading.hide();
     });
    });
    lock = true;
   });
  }
  var lock = true;
  //Osservare lo scorrimento
  $(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>

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento e che tu sostenga fortemente il tutorial di urla.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi proprietari, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.

教程基础
猜你喜欢