JavaScript利用ajax实现下拉式瀑布流布局

最新推荐文章于 2023-04-24 15:24:12 发布

BankxiY

最新推荐文章于 2023-04-24 15:24:12 发布

阅读量361

点赞数 1

分类专栏： JavaScript Flask 文章标签： python JavaScript

本文链接：https://blog.csdn.net/bankxiy/article/details/102527801

版权

Flask 同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

逻辑

首先用flask框架从数据库中拿之前爬取豆瓣读书的四十张图书封面,然后搭建好flask,然后写一个HTML的文件,做一个简单界面,使用jQuery滑动事件动态增加div,将ajax接受的数据处理给每个新增的div,调整好鼠标滚动时间和文档高度和窗口高度的值,即便成功

代码

python代码:

from flask import Flask,render_template,jsonify,request
import pymysql

app = Flask (__name__)


@app.route ("/")
def index():
    return render_template ("index.html")


@app.route ("/show/",methods=["GET","POST"])
def pbl():
    a = my_sql ()
    # 利用ajax传回来的数据判断生成器的次数
    res = request.args.get ('a')
    for i in range (int (res) - 1):
        next (a)
    return jsonify (next (a))


def my_sql():
    py = pymysql.connect ("127.0.0.1","root","","itxdl")
    cursor = py.cursor ()
    # 每次按顺序拿6张书的封面图的url
    sql = ["select title,imgurl from douban limit %d,6" % i for i in range (0,31,6)]
    for i in sql:
        cursor.execute (i)
        data = cursor.fetchall ()
        yield data
    py.close ()


if __name__ == '__main__':
    app.run (debug=True,host="127.0.0.1",port="8080")

HTML代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
        #a1 {
            margin-left:100px;
            width:1000px;
            height:750px;
            position:absolute;
            }
        .one {
            width:270px;
            height:340px;
            float:left;
            margin-left:50px;
            margin-top:20px;
            background-repeat: round;
            }


    
    </style>
</head>
<body>
<!--设置初始显示的六张图,简单排布一下-->
<div id="a1">
    <div class="one" style="background:url('../static/js/1.jpg');"></div>
    <div class="one" style="background:url('../static/js/3.jpg');"></div>
    <div class="one" style="background:url('../static/js/2.jpg');"></div>
    <div class="one" style="background:url('../static/js/4.jpg');"></div>
    <div class="one" style="background:url('../static/js/4.jpg');"></div>
    <div class="one" style="background:url('../static/js/3.jpg');"></div>
</div>
<script src="../static/js/jquery-1.8.3.min.js"></script>
<script>
        <!--设置一个数控制生成div的次数和生成器函数传回来的数据-->
        var n = 5
        <!--根据滚动条件每次添加新的6个div并把数据库的图片传上去-->
        $(document).scroll(function(){

                var y = $(window).scrollTop()
                var idx1 = $(document).height();
                var idx2 = $(window).height();
                if(idx1-(y+idx2)<=50){
                    make_div()

			}
		})

        <!--重新生成div并传图片-->
		function make_div(){
		    <!--因为只有40张图,控制图片显示完后不再瀑布-->
		    if(n<=36){
			    var i = $('<div class="one"></div><div class="one"></div><div class="one"></div><div class="one"></div><div class="one"></div><div class="one"></div>')
			    $('.one').eq(n).after(i)
			    n += 6
			    var num=(n-5)/6;
			    $.ajax({
                    url:"/show/",
                    type:"get",
                    data:{'a':num},
                    dataType:"json",
                    success:function(data){
                        for(var i=0;i<6;i++){
                            $(".one").eq(n+i-5).css('background','url('+data[i][1]+')')
                        }
                    },
                    error:function(){
                        alert("没有了")
                    },
                    timeout:2000,
                    async:false
                })
            }
		}

</script>
</body>
</html>

BankxiY

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
JavaScript利用ajax实现下拉式瀑布流布局

逻辑首先用flask框架从数据库中拿之前爬取豆瓣读书的四十张图书封面,然后搭建好flask,然后写一个HTML的文件,做一个简单界面,使用jQuery滑动事件动态增加div,将ajax接受的数据处理给每个新增的div,调整好鼠标滚动时间和文档高度和窗口高度的值,即便成功代码python代码:from flask import Flask,render_template,jsonify,re...
复制链接

扫一扫