WPF如何实现瀑布流布局？

Posted 2023-04-30

C#+Wpf 如何实现瀑布流布局。
哪位大侠有源码最好，谢谢啦~

参考技术A 能给个图片么，不知道楼主说的瀑布流布局具体要什么样子的。追问

类似于如上链接的效果，只不过是要在WPF桌面应用中实现。

麻烦高手给指导一下。谢谢！

追答

这个瀑布是一列列等宽的。我个人觉得可以放N个并列的listbox处理。比如上图中每行有7张图片，那你就可以放7个listbox。然后将Image列表里的内容依次填入这7个listbox。如果有四十九张图，那第一列list的Items就add图片1,8,15，。。43。以此类推

css 瀑布流布局问题 高手进

如图所示， 现在我只是让每个盒子float：left而已，由于每个盒子高度不定，但是需要每一个盒子左右排列并且自动补空， 形成类似于瀑布流的样子， 需要怎么控制？
不考虑新盒子的加载，只对当前盒子进行排列布局。
我尝试使用 display：fiex ，但是只能控制行，而且会让所有盒子挤到一行上，而不是我想要的分2列自动布局。
求高手解疑答惑~~

这种瀑布流实现大体有两种方式，一种就是js的方式，一种是css，相对于js来说css的控制不是很好，不能自动加载之类的，只能显示一个瀑布流效果，大体的思路就是一个div里面放两个div分别浮动，高度自动，然后将图片分别放置到这两个div里面，这样就出现一个类似于瀑布流的效果了，当然了这个伪瀑布流的弊端就是如果一列的图片都是很高的，一列都是很矮的图片看着会很不协调。大体就是这个样子 参考技术A .fall
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-width: 24em;
-webkit-column-width: 24em;
column-width: 24em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;

.item
padding: 1em;
margin: 0 0.125em 1em;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
/*这个是重点 */
break-inside: avoid;

这个的缺点是内容是竖排列的，横排的还是要用js 参考技术B 盒子外的div：

-moz-column-count: 3;
-webkit-column-count: 3;

column-count: 3;

/* 3是列数*/
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
column-gap: 2em;
/*2em是列间距*/


每个盒子：

float: left;