Maison >interface Web >js tutoriel >Créer un effet de cascade à l'aide de JavaScript

Créer un effet de cascade à l'aide de JavaScript

巴扎黑original: 2017-08-17 14:04:051635parcourir

L'exemple de cet article partage le code spécifique pour réaliser l'effet de flux en cascade dans js pour votre référence. Le contenu spécifique est le suivant
Contenu front-end :
Utilisez Javascript et quatre p pour mettre la photo dans les quatre. p's

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>Title</title> 
  <style>  .container {
   width: 1000px;
   margin: 0 auto;
   background-color: lightgray;  }  
  .item {
   width: 24%;
   margin-right: 10px;   float: left;  }  .item img{
   width: 100%;  }  
 </style>
 </head>
 <body>
  {#将内容放在container中#}
  <p>
   {# 将图片内容放入四个item中，形成四个item#} 
   <p></p> 
   <p></p> 
   <p></p> 
   <p></p> 
  </p>
  <script src="/static/js/jquery-2.1.4.min.js"></script>
  <script>
$(function() {
    {#网页加载时自动执行#
    }
    var obj = new ScrollImg();
    obj.fetchImg();
    obj.scrollEvent();
}) {#定义对象#
}
function ScrollImg() {
    this.nid = 0; {#取照片方法#
    }
    this.fetchImg = function() {
        var that = this $.ajax({
            url: &#39;/get_imgs.html&#39;,
            type: &#39;GET&#39;,
            {#传输数据，已经取了多少照片，后台可以依据，继续取照片#
            }
            data: {
                &#39;nid&#39;: that.nid
            },
            dataType: &#39;JSON&#39;,
            success: function(args) {
                if (args.status) {
                    var img_list = args.data;
                    $.each(img_list,
                    function(index, obj) {
                        var eqv = that.nid % 4;
                        var tag = document.createElement(&#39;img&#39;) tag.src = &#39;/&#39; + obj.img_dir;
                        console.log(eqv) $(&#39;.container&#39;).children().eq(eqv).append(tag) that.nid += 1;
                    })
                }
            }
        })
    } {#监听滚动条，当滚到底部时，自动加载数据#
    }
    this.scrollEvent = function() {
        var that = this;
        $(window).scroll(function() {
            var srollTop = $(window).scrollTop();
            var winHeight = $(window).height();
            var docHeight = $(document).height();
            if (srollTop + winHeight >= docHeight - 2) {
                that.fetchImg();
            }
        })
    }
}
</script>
 </body>
</html>

Contenu backend :
Basé sur le FBV de Django, vue des fonctions, lecture des données et traitement des requêtes ajax
def get_imgs(request):
# Obtenu Nombre de photos
index = request.GET.get('nid')
#Obtenez l'objet de collection QuerySet et obtenez les données à 10 tons après index

imgs_list = models.Student.objects.values(&#39;id&#39;,&#39;img_dir&#39;,&#39;name&#39;)[index:index+10]imgs_list = list(imgs_list)

# Statut de transmission et contenu des données

ret = { &#39;status&#39;:True, &#39;data&#39;:imgs_list}return JsonResponse(ret)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction aux variables JS et à leurs points de connaissance sur la portéeArticle suivant：Introduction aux variables JS et à leurs points de connaissance sur la portée

Articles Liés

Voir plus