Home > Article > Web Front-end > Create a waterfall effect using JavaScript

Create a waterfall effect using JavaScript

巴扎黑Original: 2017-08-17 14:04:051590browse

The example in this article shares the specific code for realizing the waterfall flow effect in js for your reference. The specific content is as follows
Front-end content:
Use Javascript and four p's to put the photo into the four 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>

Backend content:
Based on Django's FBV, function view, reading data and processing ajax requests
def get_imgs(request):
# Get the photos that have been obtained Number
index = request.GET.get('nid')
#Get the QuerySet collection object and get the 10-digit data after 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)

#Transfer status and Data content

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

The above is the detailed content of Create a waterfall effect using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to JS variables and their scope knowledge pointsNext article：Introduction to JS variables and their scope knowledge points

See more

Create a waterfall effect using JavaScript

Related articles