模数/网格布局与尺寸变化的项目
我正在尝试找出一种优雅的方式来在网格中显示一定数量的项目。我感觉答案部分取决于模数，但实际情况比这要复杂一些。我知道如何根据一组列数在网格中布局项目。像这样的事情：
for (var j=0;j<numFiles;j++){
clip.x = clip.width * (j % cols);
clip.y = clip.width * int(j / cols);
}
但我想要做的是设置，如果只有一个项目（j = 0），则图像覆盖整个可用区域（stage.Width和stage.Height，或者为了简单起见，1000px，和 500 像素）。如果有 2 个项目，则应有 2 列，图像占据舞台宽度的一半和全部高度 (500x500)，3 个项目 - 3 列 (300x500)，4 个项目 - 2 列和 3 个项目 - 3 列 (300x500)。 2 行 (500x250)，依此类推，保持平衡的网格布局，但减少项目的尺寸并以某种逻辑和平衡的方式增加行数。
必须有一种方法可以从数学上做到这一点，但我还没有遇到过，而且似乎无法独自掌握它。如果有人有想法，我很想听听。我正在 Flash AS3 中执行此操作，但任何示例都会有用。
I'm trying to figure an elegant way to display a certain number of items in a grid. I have a feeling the answer lies partly with modulus, but it's a little more complicated than that. I know how to lay out items in a grid based on a set number of columns. Something like this:
for (var j=0;j<numFiles;j++){
clip.x = clip.width * (j % cols);
clip.y = clip.width * int(j / cols);
}
but what I want to do is set things up such that if there is only one item (j=0), the image covers the entire available area (stage.Width and stage.Height or, for simplicity, 1000px, and 500px). If there are 2 items, there should be 2 columns, with the images taking up half the width of the stage and all of the height (500x500), 3 items - 3 columns (300x500), 4 items - 2 columns & 2 rows (500x250), and so on, keeping a balanced grid layout but decreasing the dimensions of the items and increasing the number of rows in some sort of logical and balanced manner.
There's got to be a way to do this mathematically, but I haven't come across it and can't seem to grasp it on my own. If anyone has ideas, I'd love to hear it. I'm doing this in Flash AS3, but any example would be useful.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是一个棘手的问题:)
@ThatSteveGuy 是对的；某些文件计数可能无法很好地工作。
解决这个问题的一种方法是使用 treemap 或 mansonry< /em> 算法。
树状图的实现可以在这里找到： http://www.arpitonline.com/ blog/downloads/treemap2/srcview/ (文章）
不幸的是，它与 displayList 紧密耦合，有些事情有点奇怪（例如在具有不同偏移量的多个 displayObjects 中渲染多个矩形），但它完成了工作:)
有一个 mansonry 的代码胚胎此处：Actionscript 中的程序化砌体/空间查找布局
this is a tricky problem :)
@ThatSteveGuy is right ; some file count might not work really well.
one way to solve it is to use a treemap or a mansonry algorithm.
an implementation of the treemap is available here: http://www.arpitonline.com/blog/downloads/treemap2/srcview/ ( article )
unfortunately it is strongly coupled to the displayList and some things are a bit weird, (like rendering mutilple rects in multiple displayObjects with various offsets) but it does the job :)
there is a code embryo for mansonry here: Programmatic Masonry / Space-FInding Layout in Actionscript