【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

这篇具有很好参考价值的文章主要介绍了【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

飞流直下三千尺!

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

【JavaEE】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

1. 效果前后对比

改进之前:

  1. 用户之间无差别
  2. 消息先来先到

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

改进后:

  1. 添加导航栏左上角的身份显示(头像 + 用户名)
  2. 采用瀑布流的方式去排列消息
  3. 消息以卡片的形式显示(头像 + 用户名 + 日期 + 甜言蜜语)
  4. 先来后到
    • 最新发布的排在最前

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

2. 瀑布流式布局原理思想

  • 瀑布流布局的前提就是,待排序的div元素都是等宽不限高的~

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

流程:

  1. 获取一个div元素盒子的宽
  2. 获取底板(父元素)的宽
  3. 计算底板最多排列的列数:n
  4. 将前四个div元素排在首行
  5. 从已排列的每一列中找到最矮的一列,将接下来的元素安插上去(通过绝对定位,即通过提供的坐标,安插到底板的固定位置)
  6. 重复5操作,直到全部排序好

动图演示:

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

越界了怎么办?

  • 加滚动条就行了~

细节:

  • 滚动条不能加在底板上,应该加在底板的至少上一级元素

原因:

  • 刚才在计算列数的时候,是没有减掉滚动条的宽度的,也就是说列数可能是多了1列,导致出现了“水平滚动条”,也就是说“竖直滚动条”挤压了原有元素,会导致一些排版重叠问题!

3. 约定前后端接口

之前的“甜言蜜语”只有简单的正文部分,而现在,它需要有更多的属性:
【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

再原有基础上,应该增加三个属性

  1. image,头像(与用户名绑定)
  2. date,日期(可按时间逆排序)
  3. username,用户名(确认用户信息)

所以,我们需要数据库的一张新的表:

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

因此,我们需要更改后端代码关于json构造的部分!

4. 后端代码

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

查询的表

  • message => vindicate
  • 注意修改!

4.1 修改Love类的定义

class Love {
    public String from;
    public String to;
    public String love;
    public String username;
    public String image;
    public String date;

    public Love() {
        //没有这个一定不行!!!
        //因为后续json构建Love对象需要用到无参的构造方法
    }

    public Love(String from, String to, String love, String username, String image, Timestamp date) {
        this.from = from;
        this.to = to;
        this.love = love;
        this.username = username;
        this.image = image;
        String strn = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(date);
        this.date = strn;
    }

}

注意:

  1. jdbc操作数据库,既可以将满足格式的 String类或者 Timestamp类载入数据库datetime类型字段中
  2. jdbc操作数据库,将 datetime类型的字段提取出来的时候,只能提取为 Date或者 Timestamp类(本文选择后者)

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

  • 这样子,我们在表白墙里看到的就是日期格式了~
    • 当然,日期还有格式还有很多种,这个类还能满足“yyyy/MM/dd HH-mm-ss”、“HH/mm/ss yyyy.MM.dd”等等等…
    • 但是这里,由于后续我将数据载入数据库是用的严格符合格式的字符串的方式,所以选择“yyyy-MM-dd HH:mm:ss”的格式~
    • 还有更多的类表达日期的格式,感兴趣的可以去了解了解,但是我建议,用的时候查就行了

4.2 修改doPost方法

  • 客户端发来的post请求,将客户端json格式的body转化为Love类,载入数据库

当然,客户端那里发过来的post正文是不包含,image、username和date的,所以构造的Love类对象的这三个属性的值为null~

@WebServlet("/love")
public class ShowLove extends HttpServlet {
    
    private ObjectMapper objectMapper = new ObjectMapper();
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Love love = objectMapper.readValue(req.getInputStream(), Love.class);
        HttpSession session = req.getSession();
        Timestamp time = new Timestamp(System.currentTimeMillis());
        String strn = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(time);
        love.date = strn;
        love.username = (String)session.getAttribute("username");
        love.image = Save.getImage(love.username);
        save(love);
        //默认返回的就是200的空报文
    }
}

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

然后就是调用save方法,将love对象载入数据库

4.3 修改save方法

private void save(Love love){
    DataSource dataSource = new MysqlDataSource();
    ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/Loves?characterEncoding=utf8&useSSL=false");
    ((MysqlDataSource)dataSource).setUser("root");
    ((MysqlDataSource)dataSource).setPassword("mmsszsd666");//这是俺的微信号,欢迎添加,相互学习!
    try {
        Connection connection = dataSource.getConnection();
        String sql = "insert into vindicate values(?, ?, ?, ?, ?, ?);";
        PreparedStatement preparedStatement = connection.prepareStatement(sql);
        preparedStatement.setString(1, love.from);
        preparedStatement.setString(2, love.to);
        preparedStatement.setString(3, love.love);
        preparedStatement.setString(4, love.image);
        preparedStatement.setString(5, love.date);
        preparedStatement.setString(6, love.username);
        preparedStatement.executeUpdate();

        preparedStatement.close();
        connection.close();
    } catch (SQLException e) {
        e.printStackTrace();
    }

}

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

4.4 修改doGet方法

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    //如果有输入操作互动的操作,在这里refresh是不合理的,因为写着写着就刷新了,体验不好
    // 所以在这里设置refresh没用!

    //转换为json字符串!
    List<Love> list =  load();
    String result = objectMapper.writeValueAsString(list);
    resp.setContentType("application/json; charset=utf8");
    resp.getWriter().write(result);

}

这段方法没有更改,主要是load方法更改了

4.5 修改load方法

private List<Love> load(){

    DataSource dataSource = new MysqlDataSource();
    ((MysqlDataSource)dataSource).setUrl("jdbc:mysql://127.0.0.1:3306/Loves?characterEncoding=utf8&useSSL=false");
    ((MysqlDataSource)dataSource).setUser("root");
    ((MysqlDataSource)dataSource).setPassword("mmsszsd666");//这是俺的微信号,欢迎添加,相互学习!
    List<Love> list = new ArrayList<>();
    try {
        Connection connection = dataSource.getConnection();
        String sql = "select * from vindicate order by date desc;";
        PreparedStatement preparedStatement = connection.prepareStatement(sql);

        //这里的Set并不是,对象为Love的Set集合,而是一个迭代器!
        ResultSet set = preparedStatement.executeQuery();
        //迭代他(是next方法而不是hasnext)

        while(set.next()) {
            String from = set.getString("from");
            String to = set.getString("to");
            String love = set.getString("love");
            String username = set.getString("username");
            if(username.length() > 9) {
                username = username.substring(0, 9) + "...";
            }
            String image = set.getString("image");
            Timestamp date = set.getTimestamp("date");
            list.add(new Love(from, to, love, username, image, date));
        }

        set.close();
        preparedStatement.close();
        connection.close();
    } catch (SQLException e) {
        e.printStackTrace();
    }
    return list;
}

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

接下来就是本文重点的前端的瀑布流布局实现了

5. 前端瀑布流实现

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

5.1 规定“甜言蜜语”的层级结构

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

pic的div块,就是我们的后端数据载入的对象了~
【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

T为信息头,头像显示、用户名显示以及日期显示

B为正文,“甜言蜜语”显示

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

T的左侧显示头像,右侧显示用户名和日期

5.2 css修饰

在pursue.css里增加

5.2.1 底板div:a
#a {
    height: calc(100% - 66.67px);
    width: 100%;

    /* overflow: auto; */
    position: relative;
}
  • 将滚动条注释掉,交给其上一级:article

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

  • 设置属性position为:relative,相对定位 => 与绝对定位对应,如果没有这个属性,我们提供的坐标,其是按照整个页面来定位的
    • 而设置这个属性后,是以此div来定位的(坐标系平移,原点改变)
5.2.2 div:box
  • 这个盒子代表了一条信息的占位空间,主要作用是设立内边距,与其他信息块分离
  • 这个div极为主要
.box {
    /* 用padding,而不是margin,因为我们计算的时候,我们不希望算上外边距(盒子大小,js获得高度的时候还得加上margin,复杂多了) */
    padding: 15px 0 0 15px;
    height: auto;

    /* 浮动属性 */
    float: left;
}
  • 只设置上,与左的内边距为15px

    • padding:top right bottom left(顺时针)
  • 设置浮动属性:float

    • 子元素div是块级元素,独占一行,设置这个属性后,取消块级性质,并且左排列,越界换行,但是这并不能起到瀑布流的效果
      1. 如果接下来的元素可以安插到其中一列,且总长度超过其原最长高,则会补充到对应列
      2. 若1不满足,则重起一行
5.2.3 div:pic
.pic {
    background-color: rgb(255, 255, 255);
    width: 150px;
    height: auto;
    /* 边距 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;

    /* 阴影 */
    box-shadow: 0 0 5px rgb(0, 0, 0);
}
  1. 底色为白
  2. 宽度固定为150px
  3. 高不限制,根据子元素决定
  4. 设置内边距为10px,不会导致子元素紧贴边界
  5. 设置灰色边框和黑色阴影~
5.2.4 div:T
.pic .T {
    width: 150px;
    height: 30px;
    display: flex;
    justify-content: space-between;
}

消息头的width撑破了限制无所谓~

  • 高度固定为30px => 头像为30px × 30px

设置为弹性布局,并使子元素space-between(根据实际留出间隙)

  • 并且T的左和右是不换行的~
5.2.5 div:Tleft
.Tleft {
    width: 30px;
    height: 30px;
    background-image: url(https://img1.baidu.com/it/u=4205447136,2730860147&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300);
    border: 1px solid rgb(0, 0, 0);
    border-radius: 15px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
  1. 设置半径为15px的圆形
  2. 图片为默认头像
  3. 黑色边框
  4. 设置属性是的图片充满圆
5.2.6 div:Tright
.Tright {
    width: 110px;
    height: 30px;
}
.Tright h4 {
    line-height: 15px;
    font-size: 15px;
    color: rgb(128, 128, 128);
}
  1. 宽度设置为110px,不会导致文字和图片太紧凑
  2. 高度设置为30px~
  3. h4标签设置为15px(因为有两个),刚好与div:T等高(字为灰色)
    • 日期可能会超出限制,不过无所谓,在正文的一开始加个换行错开就行了~
5.2.7 div:B
.B {
    width: 150px;
    height: auto;
    word-wrap: break-word;
    padding-right: 10px;
    padding-top: 5px;
}
  1. 宽度为150px
  2. 高度由正文决定
  3. 根据单词超出限制换行
    • 没有这个设置会导致B的高度始终为一个文字的高度
  4. 微调文字布局

5.3 JS实现瀑布流式布局

5.3.1 修改getLoves函数
  • 由于前后端交互接口的改变,这里也需要做一些调整~
function getLoves() {
    jQuery.ajax({
        type: "GET",
        url: "love",
        success: function (body) {
            var boxArray = [];
            //body就是数组
            for (var word of body) {
                var result =
                    "<br/><h2>" +
                    word.from +
                    "想对" +
                    word.to +
                    "说“" +
                    word.love +
                    "”</h2>";
                var aB = jQuery("<div></div>");
                aB.attr("class", "B");
                aB.append(result);

                var aTleft = jQuery("<div></div>");
                aTleft.attr("class", "Tleft");
                console.log(word.image);
                aTleft.css("background-image", "url(" + word.image + ")");

                var aTright = jQuery("<div></div>");
                aTright.attr("class", "Tright");
                aTright.append(
                    "<h4>" + word.username + ":</h4> <h4>" + word.date + "</h4>"
                );
                var aT = jQuery("<div></div>");
                aT.attr("class", "T");
                aT.append(aTleft);
                aT.append(aTright);
                var aPic = jQuery("<div></div>");
                aPic.attr("class", "pic");
                aPic.append(aT);
                aPic.append(aB);
                var aBox = jQuery("<div></div>");
                aBox.attr("class", "box");
                aPic.appendTo(aBox);
                aBox.appendTo(jQuery("#a"));
                boxArray.push(aBox);
            }
            waterFall(boxArray);
        },
    });
}

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

构造box的时候要细心哦,要契合我们的层级结构!

5.3.2 waterFall函数-瀑布流排列
function waterFall(boxes) {
    // 将a下的全部box取出来
    var oParent = jQuery("#a");
    
    // 计算显示的列数(页面的宽/box的宽)
    var oBoxWeight = boxes[0].outerWidth(); // console.log(oBoxWeight);
    var cols = Math.floor(jQuery("#a").width() / oBoxWeight);
    // 设置a的宽度
    oParent.css("width", cols * oBoxWeight + "px");
    oParent.css("margin", "0 auto");

    // 存放第该列(位置正确摆放的多个div高度)的高度的数组
    // 第一次,则是第一行每个div的高度
    var hArr = [];
    for (var i = 0; i < boxes.length; i++) {
        if (i < cols) {
            hArr.push(boxes[i].outerHeight());
        } else {
            var minH = Math.min.apply(null, hArr); //top
            var index = getMinhIndex(hArr, minH);
            boxes[i].attr(
                "style",
                "position: absolute; top: " +
                minH +
                "px; left: " +
                oBoxWeight * index +
                "px;"
            );
            //处理盒子重叠
            hArr[index] += boxes[i].outerHeight();
        }
    }
    // left -> 左边三个div的宽,top-> 最小高
}
function getMinhIndex(arr, val) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == val) {
            return i;
        }
    }
}

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局
【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

瀑布流布局完成!

5.4 定时刷新

  • 我们可以通过setInterval函数,设置一个函数多久定时调用一次
function refresh() {
    jQuery("#a").empty();
    getLoves();
}
setInterval(refresh, 5000);//5000ms

现在我们自动刷新的时机为:

  1. 点击发送
  2. 定时刷新

6. 测试

手机端:
【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局

电脑端:

【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局


文章到此结束!谢谢观看
可以叫我 小马,我可能写的不好或者有错误,但是一起加油鸭🦆

表白墙完结啦啦啦啦啦✿✿ヽ(°▽°)ノ✿

可能以后会追加一系列的功能,敬请期待

不久后将上线!

本文代码位置:六月代码/showLove/src/main · 游离态/马拉圈2023年6月 - 码云 - 开源中国 (gitee.com)文章来源地址https://www.toymoban.com/news/detail-478400.html


到了这里,关于【Java】表白墙终章-飞流直下的“甜言蜜语”-瀑布流式布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 自动化测试-终章

    如果想做不需要人去点击使用程序做到真正的自动化测试思想,以下是我的思想,需要跟着我的思路来,我们做一个可以测试所有页面的增删改查功能是否好使 我使用的是Java 做自动化测试,我们现做一个简单的自动化 pom 需要引入 selenium-java 然后需要搭建一下环境,需要下载 chro

    2024年02月08日
    浏览(48)
  • UFS详细介绍---终章

    UNIVERSAL FLASH STORAGE (UFS),通用闪存存储器。目前最新的标准是UFS4.0;UFS的出现是因为替代eMMC产品的,但是因为价格等,目前没办法做到完全替代。 2020年,JEDEC发布了UFS3.1;2022年,JEDEC发布了UFS4.0,4.0版本主要提升也就是之前提到的,高性能、低功耗、主要面对的也是手机等这

    2024年02月07日
    浏览(28)
  • 考研408 | 【操作系统】终章

    I/O设备:    I/O设备的分类 1.按使用特性:  2.按传输速率分类: 3.按信息交换的单位分类:  总结:  I/O设备的机械部件:  I/O设备的电子部件(I/O控制器):  I/O控制器的组成:    内存映像I/O VS 寄存器独立编址 总结:  程序直接控制方式:    中断驱动方式:  DMA方式

    2024年02月10日
    浏览(29)
  • 【C++】类和对象终章

    🔥 博客主页 : 小羊失眠啦. 🎥 系列专栏 : 《C语言》 《数据结构》 《C++》 《Linux》 《Cpolar》 ❤️ 感谢大家点赞👍收藏⭐评论✍️ 本章我们将继续加深对构造函数的学习。认识 初始化列表 、 explicit 、 static成员 、学习static成员的 相关特性 、学习 友元 的概念,

    2024年03月20日
    浏览(35)
  • SQL提示与索引终章

    ✨博客主页:小小恶斯法克的博客 🎈该系列文章专栏:重拾MySQL-进阶篇 📜 感谢大家的关注! ❤️ 可以关注黑马IT,进行学习 目录 🚀SQL提示 🚀覆盖索引 🚀前缀索引 🚀前缀长度 🚀单列索引与联合索引 🚀索引设计原则  目 前 tb_user 表的数据情况如下 : 索引情况如下

    2024年01月25日
    浏览(42)
  • 【C语言】指针进阶知识终章

    ✨作者:@平凡的人1 ✨专栏:《C语言从0到1》 ✨一句话:凡是过往,皆为序章 ✨说明: 过去无可挽回, 未来可以改变 🌹 感谢您的点赞与关注,同时欢迎各位有空来访我的 🍁平凡舍 回顾我们前面学习了指针数组、数组指针以及简单介绍了函数指针,传参问题等。下面我们

    2024年02月03日
    浏览(27)
  • Spring源码:Bean生命周期(终章)

    本系列前面讲解了Spring的bean定义、bean实例化、bean初始化等生命周期。这些步骤使我们能够了解bean从创建到准备好使用所经历的过程。但是,除了这些步骤,bean的销毁也是非常重要的一步。在本系列的最后,我们将深入探讨bean的销毁过程,包括在什么情况下会发生销毁、销

    2024年02月06日
    浏览(38)
  • 第九层(16):STL终章——常用集合算法

    🎉welcome🎉 ✒️博主介绍:一名大一的智能制造专业学生,在学习C/C++的路上会越走越远,后面不定期更新有关C/C++语法,数据结构,算法,Linux,ue5使用,制作游戏的心得,和大家一起共同成长。 ✈️C++专栏:C++爬塔日记 😘博客制作不易,👍点赞+⭐收藏+➕关注 在上一块

    2024年02月02日
    浏览(26)
  • JUC并发编程(终章)各种锁的理解

    公平锁、非公平锁 公平锁:先到先得(不可插队) 非公平锁:达者为先(可插队)----------默认 可重入锁(递归锁) 所有的锁都是可重入锁 Synchronized版 ems方法中包含了call方法,所以当我们调用ems方法获取到锁时,也把call方法的synchronized锁获取到了。 错误理论 当线程A运行

    2024年02月05日
    浏览(52)
  • AMBA总线协议(9)——AHB(七):终章

            在之前的文章中我们讲述了AHB协议的分割传输机制,它使得从机可以决定一次传输是否继续进行,以防止 传输的执行将占据大量的时钟周期,有效提高了总线的公平性与效率问题,本文中我们将一次性学习完AHB最后的内容,包括有复位,数据总线的位宽和接口设备

    2024年02月11日
    浏览(21)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包