0

为一般问题道歉，但我一直在寻求实现类似于新 Flickr 布局的图像展示，如本示例中

我遇到的困难在于响应式设计。我查看了各种插件，包括：Isotope、Wookmark、Grid-a-licious，但所有这些解决方案要么在调整浏览器窗口大小时留下不均匀的边距/排水沟，要么在 pinterest 样式的底部不对齐。只是垂直堆叠在行上。

我想知道是否有人知道一个插件可以调整图像大小以完全填充行的宽度并在底部正确对齐所有图像，就像在 Flickr 上一样。

或者，很高兴知道从哪里开始使用 javascript 做这样的事情？

4

2 回答 2

1

我知道为时已晚，但这个库可以满足您的需要：

http://masonjs.com/

于 2013-12-23T22:13:28.383 回答
0

在我的旅行中，我通过 css3 媒体查询在一些响应式网站上工作。这是我在媒体查询发生更改时需要触发javascript的情况下找到并使用的修改后的解决方案：

// define a query here
var theQuery = "(min-width: 960px)";

var mql = window.matchMedia( theQuery );
var TO = setTimeout( function(){}, 100);

var handleMediaChange = function (mediaQueryList) {
    if (mediaQueryList.matches) {

        // the media query evaluates to true
        clearTimeout(TO);
        window.state = 0;

        TO = setTimeout( function(){
            // javascript actions go here   
        }, 100 );

    } else {

        // @media query evaluates to false
        clearTimeout(TO);
        window.state = 0;   

        TO = setTimeout( function(){
            // javascript actions go here   
        }, 100 );

    }
}

mql.addListener(handleMediaChange);
handleMediaChange(mql);

本质上，它允许我们定义一个查询，然后添加一个侦听器来监视窗口对象是否会触发我们的查询。当它触发时，我已经定义了两组 javascript，每组用于媒体查询评估为真或假，但是如果条件，您可以删除它，并让任何更改执行一些脚本...

试一试，希望它有所帮助

于 2013-05-22T20:55:31.930 回答