瀑布流显示图片

1.先创建一个数据库导入图片资源数据,然后创建一个服务用于按页数输出数据,添加我们所要用到的数据,然后在页面下添加一个瀑布流容器,瀑布流容器在左上角的扩展组件里在这里插入图片描述
因为我们要通过数组展示多个瀑布流卡片,所以这里先在容器下添加一个循环,将要展示的图片数据与该循环绑定,然后再在循环里添加瀑布流卡片,瀑布流卡片的添加也是在左上角的扩展组件里。
2.如果要通过一些条件区别达到不同的展示效果,可以通过if判断实现,比如通过更改跨度的值来控制,跨度越低所占宽度越低
在这里插入图片描述
demo中默认宽度为375,每列跨度为175,后面设置卡片列跨度的时候,卡片宽度就为列跨度*175,可以通过需求调整列跨度来使展示更美观,瀑布流卡片下加入图片后将图片的资源地址与循环数据进行绑定
在这里插入图片描述
3.这个时候数组中是没有数据的,在需要输出的事件下添加对应的数据输出到数组就行了
在这里插入图片描述在这里插入图片描述