Créer un effet de cascade à l'aide de JavaScript-js tutoriel-php.cn

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

巴扎黑

Libérer： 2017-08-17 14:04:05

original

1651 Les gens l'ont consulté

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>

Copier après la connexion

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)

Copier après la connexion

# Statut de transmission et contenu des données

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

Copier après la connexion

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!