English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
1. Desplazamiento en cascadaEs un caso común, aquí se explica principalmente cómo implementar la función de desplazamiento en cascada utilizando jQuery!
Introducción: A menudo vemos muchas funciones de desplazamiento en cascada en varios sitios web, como Taobao, JD.com y otros productos...
Primero, al implementar esto, consideramos varios problemas:1、obtener los datos 2、manera de alineación 3、cómo lograr la alineación
En realidad, en la cascada hay una función central que utiliza el posicionamiento absoluto
Vamos a analizarlo paso a paso:
Este es el diseño html, el diseño css se puede configurar por sí mismo, ¡sólo asegúrese de que la caja de grid tenga posicionamiento absoluto, y su elemento padre tiene posicionamiento relativo! Más adelante hay código de referencia
A continuación, es la parte de script
Este método puede obtener el índice de la imagen en orden mediante el bucle for, y luego cambiar continuamente el valor de top y left en el estilo css!
En algunas ocasiones, cuando obtenemos los recursos de la imagen, la altura de la imagen no es consistente, si se ordena según el orden, la última imagen se mostrará, el orden no será ordenado, ¡lo que afectará el efecto!
Continuemos viendo:
Podemos lograr que la imagen se inserte en la columna más corta actual mediante otro método, ¡resuelve este problema!
A continuación, veamos principalmente el código de jquery:
Bien, ahora hemos resuelto este problema de cascada de dos formas, ¡pero aún nos falta resolver un problema, es que la razón principal para hacer la cascada es porque la cantidad de imágenes es grande, escribir html una por una ¿no es un poco bajo?
Continuemos viendo:
A continuación, se introduce una manera de obtener datos de json en el fondo utilizando el patrón de motor de plantilla, ¡realizar este problema!
1¡Sólo necesitamos construir una caja html!
2、la estructura de la caja está construida, ¡los datos se deben obtener con él!
3、estos son dos bibliotecas js, se pueden descargar en línea!
4、a continuación, es la parte específica de js, ¡es necesario analizarlo con detalle!
Incluye principalmente, llamar al contenido del patrón de motor de búsqueda obtenido, enlace de función, conversión en objeto jquery!
Esta parte incluye principalmente: obtener datos mediante AJAX para la solicitud de json
Esta parte incluye principalmente: función de recorrido, buscar el patrón de columnas más corto!
Además, estos son también la cuarta parte:
El último paso es: la función de desplazamiento, se recomienda usar console.log en el fondo para verificarlo, ¡es más fácil de entender!
Aunque el último método es complicado, una vez completado, podemos usarlo muchas veces y obtener muchos datos automáticamente!
Aquí les dejo el código binario, ¡pruébenlo bien y no olviden cambiar las imágenes y las rutas!
Método binario第一种：
!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;*/
/*borde: 1px sólido rojo;*/
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;
//recorrer la altura total de las personas por encima
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>
Método binario第二种：
!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">
Cargando...
</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">
// Definir variables y objetos
// Obtener el contenido del patrón del motor, convertirlo en cadena usando jQuery
var templateString = $("#grid_template").html();
// ¡Vincular la cadena convertida al función compileFunction!
var compileFunction = _.template(templateString);//¡_.template() devuelve una función!
// console.log(typeof(compileFunction)); //function
//Convertir en objeto jQuery para su uso posterior
var $waterfall = $("#waterfall");
var $loading = $(".loading");
//Tres columnas de cascada, altura total de cada columna
var colHeight = [0,0,0];
// Esto es un array de alturas de tres columnas, sin relación con los valores internos, que representa el orden de index
// console.log(colHeight);
// Obtener datos
//semáforo
var page = 1;
getJSONandRender(page());
function getJSONandRender(page){
// Para mejorar la experiencia del usuario
$loading.show();
//Enviar solicitud ajax
$.get("json/json + page + ".txt",function(data){ //Salida de cadena
//Conversión en objeto
var dataObj = eval("(" + datos + )"); //Análisis de datos ajax, conversión en objeto!
//No hay más datos
// dataObj.news.length viene del json de fondo
if(dataObj.news.length == 0){
$loading.show().html("No hay más");
return; //Aquí, el lock también se detendrá
}
// Función de iteración, obtener dinámicamente el valor de índice según la posición de alineación absoluta!
_.each(dataObj.news,function(dictionary){ //¡Ejecuta la función una vez por cada iteración!
//Este es el constructor integrado del sistema
var image = new Image(); //La instanciación de un objeto asigna espacio en memoria
// Después de que el objeto se instancie, el constructor ejecutará inmediatamente cualquier código que contenga
image.src = dictionary.imgurl;
//Ahora convertimos image a objeto jQuery y luego asociamos eventos
$(image).load(function(){
// console.log(dictionary.imgurl + "Carga completada");
var domString = compileFunction(dictionary);
// console.log(typeof(domString));
var $grid = $(domString);
$waterfall.append($grid);
//De acuerdo con el algoritmo de cascada, configure su left y top
// valorMínimo
minValue = _.min(colHeight);
// ¡La posición del valor mínimo!}
minIndex = _.indexOf(colHeight,minValue);
$grid.css({
"top" : minValue,
"left" : minIndex * 270
});
//Cambiar el valor del array de altura total de columnas
colHeight[minIndex] += $grid.outerHeight() + 10;
//Hacer que la caja grande se ajuste a la altura más alta de la columna
$waterfall.css("height",_.max(colHeight));
//Ocultar texto de loading
$loading.hide();
});
});
lock = true;
});
}
var lock = true;
//Escuchar desplazamiento
$(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>
Este es el contenido completo del artículo, espero que ayude a su aprendizaje y que todos los demás apoyen a la tutorial de gritos.
Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha subido por los usuarios de Internet de manera autónoma, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume la responsabilidad legal relevante. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w proporcionando evidencia relevante, una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.3Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha subido por los usuarios de Internet de manera autónoma, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume la responsabilidad legal relevante. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w proporcionando evidencia relevante, una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.