Erstellen Sie mit JavaScript einen Wasserfalleffekt-js-Tutorial-php.cn

Erstellen Sie mit JavaScript einen Wasserfalleffekt

巴扎黑

Freigeben： 2017-08-17 14:04:05

Original

1631 Leute haben es durchsucht

Das Beispiel in diesem Artikel teilt Ihnen den spezifischen Code zur Erzielung des Wasserfall-Flow-Effekts in js als Referenz mit. Der spezifische Inhalt lautet wie folgt:
Front-End-Inhalt:
Verwenden Sie Javascript und vier Ps, um das Foto einzufügen die vier ps

<!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>

Nach dem Login kopieren

Backend-Inhalt:
Basierend auf Djangos FBV, Funktionsansicht, Lesen von Daten und Verarbeiten von Ajax-Anfragen
def get_imgs(request):
# Erhaltene Anzahl von Fotos
index = request.GET.get('nid')
#Holen Sie sich das QuerySet-Sammlungsobjekt und rufen Sie die 10-Ton-Daten nach dem Index ab

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

Nach dem Login kopieren

# Übertragungsstatus und Dateninhalt

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonErstellen Sie mit JavaScript einen Wasserfalleffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!