jQuery / css：流体响应同位素网格与方形div [英] jQuery/css: Fluid responsive isotope grid with square divs

问题描述

我试图找出它是否可能有一个流体同位素布局的正方形。我有一个4列网格，每个div是24％的容器宽度，但我想要这些div是完美的正方形，我不能解决如何实现这一点。

这里是一个工作的jsfiddle演示： http://jsfiddle.net/RJZu6/8/

jQuery：

I'm trying to figure out if its at all possible to have square divs with a fluid isotope layout. I have a 4 column grid, each div being 24% width of the container, but I want these divs to be perfect squares, I can't work out how to achieve this.
Here's a working jsfiddle demo: http://jsfiddle.net/RJZu6/8/
jQuery:

var $container = $("#main-grid");

var size = function () {
    $container.isotope({
        masonry: {
            columnWidth: $container.width() / 4
        }
    });
}

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: ".grid-block",
        animationEngine: "jquery",
        sortBy: "random",
        resizable: false,
        masonry: {
            columnWidth: $container.width() / 4
        }
    });

    size();
});

$(window).smartresize(size);

css：

#main-grid { 
    position: absolute;
    width: 100%;
}

.grid-block { 
    width: 24%; height: 50px; 
    margin-left: 0.25%; margin-right: 0.25%; 
    margin-bottom: 5px; 
    background: no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

流畅性和功能性很好，只是div的大小有麻烦。

The fluidity and functionality works fine, just the sizes of the divs I'm having trouble with. Is it at all possible to have perfect square responsive divs?

推荐答案

根据你内部的内容，你可以实现流体正方形很容易使用
padding-bottom ;

Depending on what you have inside as content, you can achieve fluid squares pretty easily using padding-bottom;

例如

width: 50%;
height: 0;
padding-bottom: 50%;

因此，在这个更新的小提琴所有我改变的是 grid-lock的CSS

So in this updated fiddle all that I changed was the CSS of grid-lock

.grid-block { 
    width: 24%;  
    margin-left: 0.25%; margin-right: 0.25%; 
    margin-bottom: 5px; 
    background: no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-bottom:24%;
}

下面是一个页面中方形元素的示例

这里有关于技术的更多信息。

这篇关于jQuery / css：流体响应同位素网格与方形div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！