Question

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

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

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

或者，知道在哪里开始使用javascript这样的东西会很棒吗？

Answer 1

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

http://masonjs.com/

Answer 2

在我的旅行中，我通过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，每一组用于评估为true或false的媒体查询，但你可以删除这个if条件并且只是有任何更改执行一些脚本......

尝试一下，希望有所帮助

响应式Javascript图像调整大小

2 个答案: