[英]Thumbnail grid with bootstrap
I'm trying to make responsible grid with thumbnails using bootstrap and knockout. 我正在尝试使用引导程序和剔除程序使带有缩略图的负责任网格。 Currently i have the next html:
目前,我有下一个html:
<div class="row">
<!-- ko if: toys().length == 0 -->
<div>No toys in category</div>
<!-- /ko -->
<!-- ko foreach: toys-->
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 previewGridItem">
<a class="thumbnail" data-bind="attr: { href: '#!/toy/' + id }">
<img data-bind="attr: {src: images[0] ? images[0] : '/Content/img/NoImage.jpg' }" />
<span data-bind="text: name"></span>
</a>
</div>
<!-- /ko -->
</div>
Sometimes i'm getting correct grid. 有时我会得到正确的网格。 But in most cases (ofcourse depending on size of images and length of item's names) i've got something like this:
但是在大多数情况下(当然,这取决于图像的大小和项目名称的长度),我得到的是这样的:
.
。
How to properly align items? 如何正确对齐项目? The most simple answer is to set height of images to constant, but then the proportions of images are ruined.
最简单的答案是将图像的高度设置为恒定,但是这样会破坏图像的比例。 More over, i want images resizing including height.
更重要的是,我想调整图像的大小,包括高度。 Text are limited by 2 lines per image.
每个图像的文字限制为2行。
I suggest you to take a look at Gridalicious plugin - it's created exactly for this type of situations. 我建议您看一下Gridalicious插件-正是针对这种情况创建的。 It's also pretty fast, and can be easly adjusted for your needs with built in configurable parameters as well as simply editing uncompressed version of plugin accordingly to your needs.
它也非常快,并且可以通过内置的可配置参数轻松地根据您的需求进行调整,并且可以根据需要简单地编辑插件的未压缩版本。
http://suprb.com/apps/gridalicious/ http://suprb.com/apps/gridalicious/
For now, i solved problem using jQuery plugin mentioned in comment by Artanis . 目前,我使用Artanis的评论中提到的jQuery插件解决了问题。 I've also have to use plugin imagesLoaded because i have ajax call which loading images.
我还必须使用插件imagesLoaded,因为我有一个加载图像的ajax调用。 In result i've written next code:
结果,我写了下一个代码:
window.imagesLoaded(".previewGridItem", function(instance) {
$(".previewGridItem").matchHeight();
});
I do not think that it's the best solution, because now i have 40kb (12Kb minimized) libraries only to align images. 我认为这不是最好的解决方案,因为现在我有40kb(最小化12Kb)的库仅用于对齐图像。 But for now i can't find a solution only with css.
但是现在我无法仅使用CSS找到解决方案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.