【撸网站第二天】瀑布流布局

最新推荐文章于 2024-05-07 19:40:51 发布
最新推荐文章于 2024-05-07 19:40:51 发布
阅读量3.8w 收藏
点赞数
文章标签： html5 vue.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingxingzhilong/article/details/111239839
版权

学习网址：http://xingship.com

我们会看到很好看的布局方式，我个人比较喜欢的某款app的布局方式，如下。

非常喜欢他们家的app 页面布局。再回来看看，http://xingship.com 这个网站也有类似的布局

 

看到，这两个UI的风格比较像。只是http://xingship.com 他们这个更为粗糙，小作坊的作品。但是，这个并不影响我们学习他的技术点。

首先，我们在pc上 打开该网址，然后F12进入到开发者模式，让我们来看看

 

 

 我们看到，貌似用的是vue框架。引用到了vue.js。接下来看看他的布局结构。

浏览页面的时候，我发现这个网站做了一些动画在里面，下一篇再扒一扒。这一篇先看瀑布布局。继续往下撸。

我们找到这个节点

 

这个节点下面，就是我们正文内容。我们需要的。看看他怎么实现的

我发现，他有好几个index

 

 不知道是干啥的，最后我发现首页就是index：0

继续撸，进入到index：0的内容中，发现，他列举了两列，到这里给了我一个启发。

 

 我的启发就是，这两列就是瀑布的错开的那两列，不知道算不算奇思淫巧。好貌似懂了这个瀑布布局方式了。

留个悬念给大家，大家明白了吗？瀑布的布局？

四维空间151
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue实现简单瀑布流布局
11-21
总结起来，这个 Vue 瀑布流布局实现结合了 Vue 的组件化思想，利用 CSS 进行布局，通过 JavaScript 处理数据转换，并引入第三方库 `vue-lazyload` 提升性能。这样的布局方式不仅适用于图片展示，也可以应用于其他...
三种方式实现瀑布流布局
10-20
本文主要介绍了分别使用javascript，jquery，css实现瀑布流布局的方法。具有很好的参考价值，下面跟着小编一起来看下吧
发现一个好看的手机壁纸网站，撸代码的手已经饥渴难耐了
Python案例分享，B站视频教程：https://space.bilibili.com/523606542
09-12 3845
本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。 最近有同学的爬虫代码出了bug，给问我怎么改 于是就发现了这个好看的手机壁纸网站。 看到那么多好看的壁纸，我的爬虫已经饥渴难耐了 受害网址 http://m.bcoderss.com/ 为了良性爬取，这个代码就不完整的展示出来了 部分爬虫代码 导入工具 from urllib import parse import requests im...
用mobx-react框架wukong撸个电影网站
个人新博客: https://cbbfcd.github.io/
08-03 1万+
Redux太烦了，试试mobx-react，使用wukong框架撸了个电影网站。 地址： https://github.com/cbbfcd/Movies-mobx-react.git 欢迎star,不断完善中.
怒爬某破Hub站资源，只为撸这个鉴黄平台！(2)
最新发布
2401_84149256的博客
05-07 943
其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。当然我也为你们整理好了百度、阿里、腾讯、字节跳动等等互联网超级大厂的历年面试真题集锦。这也是我这些年来养成的习惯，一定要学会把好的东西，归纳整理，然后系统的消化吸收，这样才能极大的提高学习效率和成长进阶。碎片、零散化的东西，我觉得最没有价值的。就好比你给我一张扑克牌，我只会觉得它是一张废纸，但如果你给我一副扑克牌，它便有了它的价值。
【撸网站第一天】开篇
xingxingzhilong的专栏
12-14 20万+
今天准备撸一个网站，主要撸一下他的技术点，包括：前端、结构、后端、压力测试 等等。 现介绍一下这个网站：http://xingship.com 测试下来，这个网站貌似只能在手机上使用，我在pc上显示的效果并不是很好，不知道站长是否可以兼容一下pc端。 如下效果： 很丑，但是当我跑到手机上来看的时候，还像那么回事。 网站呢，主要是电影短视频的介绍。 开始我以为这个是网站的布局是这一个标准的网格布局，但是其实他是个瀑布模式。第二篇，我们来详细介绍这个，好啦，今天由于时间关系，就现记录到这..
网址
三人行，必有我师焉。
12-27 4万+
http://live.wasu.cn/show/id/44499 http://www.sjexpo.cn/   div + css布局 http://vbird.dic.ksu.edu.tw/linux_basic/0110whatislinux.php 鸟哥的liunx操作 cd /opt/deploy/qa-oa/ ssh 172.16.3.81 连接的命令
手把手撸个博客网站
Zhooson的博客
02-29 4万+
node-webserver-blog-public 源码地址 博客地址 CSDN 运行项目前必读 三个项目中各种各样的授权参数 已全部修改成自己的授权参数，忘悉知！！！！忘悉知！！！！忘悉知！！！！ 自己创建一个数据库名称就可以了，表是运行 node 时候自动创建好 以 myblog3 为数据库名称， admin 登录页面有个 一键生成地方生成账号：admin 密码：123， 只能生成一次，因...
微信小程序源码 瀑布流布局(学习版)
06-18
微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)...
微信小程序 瀑布流布局 (源码)
05-31
微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信...
一小时快速撸出一个短网址生成项目
海岛拾贝
09-30 3万+
写在最前面  项目完整源码(欢迎star)：github项目源码  项目临时预览地址(指不定什么时候就挂了)：短网址生成项目预览 引入主题  前几天在某论坛看到这样一篇帖子，说的是“大家第一个项目，都是从网址导航开始？”，浏览半天回复的内容发现都是大佬啊，有做了个浏览器插件的，有做了个博客的，这个—>“片段”<—更不错，手撸出来的多厉害。当然也有不少做的网址导航的，于是我想了想之前搞的...
撸了2个Python学习网站
python爬虫人工智能大数据
02-12 3709
年前撸了2个Python相关的学习网站，第一个网站（www.python88.cn)主要功能有Python学习资源查询、全套Python、爬虫、web、数据分析、机器学习...
【心得】白嫖网站
qq_43808611的博客
07-17 1万+
1.茶杯狐 https://www.cupfox.com/ 2.文章生成器 https://suulnnka.github.io/BullshitGenerator/index.html 3.idata知网镜像 https://www.cn-ki.net/ 4.阿里巴巴矢量图标库 https://www.iconfont.cn/ 5.自由字体 https://ziyouziti.com/ 6.panzoid http://panzoid.com/ 7.耳聆网 https://www.ear0.com/ 8.
放弃WordPress，纯手撸一个导航网站
weixin_50227664的博客
10-16 3556
NextJS+TailWindCSS+StrAPI 手撸一个导航网站
网址大全
网站建设
09-10 2579
<br />【网页设计】 visualJquery   JqueryAPI   Jquery中文入门指南
日撸代码300行（41-50天，查找与排序）
pocket_eight的博客
08-15 1万+
原文：日撸代码300行（41-50天，查找与排序） 41.顺序查找与折半查找 42.哈希表 43.插入排序 package day50; /** * Day 41: 顺序查找，二分查找 * 和老板保持一致，用键值对数据进行学习. * * @author pzf */ public class DataArray { /** * 内部类. 数据节点. */ static class DataNode { int key; // 键
工作了17年，2021年双11是我见过有史以来“撸腾讯云羊毛”最狠的一次，血赚
讯开技术孵化器博客
11-11 2万+
工作了17年，2021年双11是我见过有史以来“撸腾讯云羊毛”最狠的一次，血赚！ 我为什么强烈推荐我的粉丝一定要有一台自己的服务器？ • 1、可以放自己的资料，走到哪里都不怕丢文件，一键上传，多爽，速度还快； • 2、可以部署一个自己唯一的博客网站； – （1）有自己的独立域名； – （2）想发什么就发什么，无拘无束（当然了，一定要合法哦）； – （3）自己的网站，想怎么布局就怎么布局，谁也管不着你； – （4）博客积累多了，也是一笔财富 • a）被出版社看中：可以整理出书； • b）写在简历上：可以加分（
撸一撸ArrayList源码
热门推荐
runrun117的博客
05-10 37万+
1、起始大小102、是object[]的数组3、多个构造方法，可以指定大小4、private int size; 表示数组中元素的个数。因为通常情况下，ArrayList后面是有空白位置的，数据并没有把结合填满，因为在扩充元素的时候造成。所以ArrayList是用.size()来请求的大小5、 public ArrayList(Collection&lt;? extends E&gt; c) ；表...
我也撸了一个古诗词网站
09-22 1万+
听到“七月在野，八月在宇 ，九月在户，十月蟋蟀入我床下。”时你是什么感受？ 培根说：“读史使人明智，读诗使人智慧，演算使人精密，哲理使人深刻，伦理使人有修养，逻辑修辞使人善辩。”，知乎上有人说：“我从刚会说话不久就开始背古诗，三岁到六岁对于外界的信息接收几乎都来自古诗，现在我二十岁了，我时常觉得我不是从幼年长大的，而是从很遥远的地方开始，走了很长很长时间。” 我从小对古诗词有一点点小情节，也许当你读到一首诗产生共鸣的时候，也会产生这种情节吧。 前面扯得有点多了，说说正题。今年 5 月中旬有了做这个古诗
android studio瀑布流布局只显示第一行
12-14
针对这个问题，可能是由于瀑布流布局中的子 View 没有填满每一列导致的。可以尝试以下几种方法来解决这个问题： 1. 确保每一列的高度都是一致的，这样才能保证子 View 能够填满每一列。 2. 确保每一个子 View 的高度都是确定的，如果高度不确定，可以在代码中动态计算出每一个子 View 的高度。 3. 确保在添加子 View 的时候，使用的是 addViewInLayout() 方法，而不是 addView() 方法。addViewInLayout() 方法可以确保子 View 能够正确地添加到布局中。 4. 确保在添加子 View 的时候，使用的是 makeAndAddView() 方法，而不是 addView() 方法。makeAndAddView() 方法可以确保子 View 能够正确地添加到布局中，并且能够正确地计算出每一个子 View 的位置和大小。 以下是一个简单的瀑布流布局的示例代码，可以参考一下： ```xml <com.example.waterfalllayout.WaterfallLayout android:id="@+id/waterfall_layout" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` ```java public class WaterfallLayout extends ViewGroup { private int mColumnCount = 3; // 列数 private int mColumnGap = 10; // 列之间的间隔 private int mRowGap = 10; // 行之间的间隔 private int[] mColumnHeight; // 每一列的高度 private List<View> mChildViews = new ArrayList<>(); // 所有子 View public WaterfallLayout(Context context) { super(context); init(); } public WaterfallLayout(Context context, AttributeSet attrs) { super(context, attrs); init(); } public WaterfallLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { mColumnHeight = new int[mColumnCount]; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); int childWidth = (width - mColumnGap * (mColumnCount - 1)) / mColumnCount; int childCount = getChildCount(); for (int i = 0; i < childCount; i++) { View child = getChildAt(i); measureChild(child, MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.EXACTLY), heightMeasureSpec); } int maxHeight = 0; for (int i = 0; i < mColumnCount; i++) { mColumnHeight[i] = 0; } for (int i = 0; i < childCount; i++) { View child = getChildAt(i); int columnIndex = getMinHeightColumnIndex(); int left = columnIndex * (childWidth + mColumnGap); int top = mColumnHeight[columnIndex]; int right = left + childWidth; int bottom = top + child.getMeasuredHeight(); child.layout(left, top, right, bottom); mColumnHeight[columnIndex] = bottom + mRowGap; maxHeight = Math.max(maxHeight, mColumnHeight[columnIndex]); } setMeasuredDimension(width, maxHeight); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { // do nothing } private int getMinHeightColumnIndex() { int index = 0; int minHeight = mColumnHeight[0]; for (int i = 1; i < mColumnCount; i++) { if (mColumnHeight[i] < minHeight) { index = i; minHeight = mColumnHeight[i]; } } return index; } public void addChildView(View child) { mChildViews.add(child); addViewInLayout(child, -1, generateDefaultLayoutParams(), true); requestLayout(); } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值