Три примера реализации водопада с помощью jQuery

1. Падающий водопадЭто常见的 case, здесь я рассказываю, как реализовать функцию водопада с помощью jQuery!

Введение: мы часто видим функцию водопада на многих веб-сайтах, таких как Taobao, JD и другие...

Для реализации его мы в первую очередь должны учитывать несколько вопросов:1. Получение данных 2. Способ排列 3. Как реализовать排列

На самом деле, в водопаде есть ядра, которые используют абсолютное позиционирование

Мы будем постепенно углубляться в анализ:

Это разметка html, разметка css можно настроить самостоятельно, только нужно чтобы grid-коробка имел абсолютное позиционирование, а его родительский элемент относительное позиционирование! В разделе есть пример кода

Ниже приведен раздел script

Этот способ можно получить индекс изображения по порядку с помощью цикла for, а затем постоянно изменять значение top и left в стилях CSS!

При получении ресурсов изображений иногда высота изображений не одинакова, если они всегда следуют順序у, то последнее изображение будет выровнено неаккуратно, и это будет выглядеть плохо!

Продолжаем читать дальше:

Мы можем использовать другой способ для вставки изображения в самое короткое столбец текущего столбца, чтобы решить эту проблему!

Ниже мы посмотрим на код jquery:

Хорошо, теперь мы уже решили эту проблему водопада двумя способами, но у нас все еще есть проблема, это то, что для создания водопада очень важно количество изображений, не слишком низко ли это, чтобы писать html по одному?

Продолжаем читать дальше:

Ниже я介绍一下 способ использования шаблонов двигателя для получения данных json с сервера, чтобы реализовать эту проблему!

1. Нам нужно только搭建 html-коробку!

2. Коробка собрана, данные нужно получить, это зависит от нее!

3. Это два библиотеки js, которые можно загрузить в Интернете!

4. Ниже приведена конкретная часть js, которую нужно внимательно анализировать!

Включает: вызов шаблонов поисковой системы, привязку функций, преобразование в объекты jQuery!

Эта часть включает в себя: запрос данных к json через ajax

Эта часть включает в себя: функции遍历, для поиска самого короткого столбца!

Вот и это, также является четвертой частью:

Последним шагом является функция прокрутки, эту часть рекомендуется проверить с помощью 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];
  // Это массив высот трёх столбцов, который не зависит от значений внутри, он показывает порядок индексов
  // console.log(colHeight);
 // Получение данных
  // Сигнализатор
  var page = 1;
  getJSONandRender(page());
  function getJSONandRender(page){
   // Для улучшения пользовательского опыта
   $loading.show();
   // Отправка запроса ajax
   $.get("json/json" + page + ".txt", function(data){ // Вывод строки 
    // Преобразование в объект
    var dataObj = eval("(" + data + ")"); // Парсинг данных 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;
  //Слушать скроллинг
  $.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#oldtoolbag.com (во время отправки письма, пожалуйста, замените # на @) для подачи жалоб и предоставления соответствующих доказательств. При подтверждении факта, сайт немедленно удаляет涉嫌侵权的内容.

Основной учебник

Вам может понравиться