Lưu trữ hình ảnh ngược: xếp hình ảnh từ dưới lên trên bằng CSS/Javascript?

Question

Tự hỏi nếu có ai có giải pháp cho việc này.
Tôi muốn trình bày một kho lưu trữ hình ảnh thu nhỏ lâu đời nhất ở dưới cùng và mới nhất ở trên cùng. Tôi cũng muốn dòng chảy tự bị đảo ngược ... một cái gì đó như thế này:

Trang nên ngay thẳng, với những hình ảnh tương lai thêm vào phía trên cùng của trang. Tôi đang tạo trang động với PHP kéo tên tập tin hình ảnh từ một DB MySQL. Việc nắm bắt ở đây là tôi rất thích bố cục này là chất lỏng, có nghĩa là hầu hết các thủ thuật PHP để đếm hình ảnh và xây dựng HTML cho phù hợp đi ra ngoài cửa sổ.

Có cách nào để làm điều này với Javascript hoặc thậm chí chỉ CSS?

Answer 1

Xem:http://jsfiddle.net/thirtydot/pft6p/

này sử dụng float: right-order the divs as required, sau đó transform: scaleY(-1)flips the entire container, và cuối cùng transform: scaleY(-1) lại flips each individual image back.

Nó sẽ hoạt động trong IE9 trở lên và tất cả các trình duyệt hiện đại.

CSS:

#container, #container > div { 
    -webkit-transform: scaleY(-1); 
     -moz-transform: scaleY(-1); 
     -ms-transform: scaleY(-1); 
     -o-transform: scaleY(-1); 
      transform: scaleY(-1); 
} 

#container { 
    background: #ccc; 
    overflow: hidden; 
} 
#container > div { 
    float: right; 
    width: 100px; 
    height: 150px; 
    border: 1px solid red; 
    margin: 15px; 
    font-size: 48px; 
    line-height: 150px; 
    text-align: center; 
    background: #fff; 
} 

HTML:

<div id="container"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    .. 
</div> 

Answer 2

Mô-đun hộp linh hoạt CSS được tạo cho loại điều này. Xem ví dụ nhanh mà tôi đã bỏ qua: http://jsfiddle.net/c6QLC/2/ (xem xét điều này trong Firefox)

Bây giờ tin xấu: bạn thực sự không thể dựa vào nó. Không chỉ là spec được viết lại, việc thực hiện hiện tại không hỗ trợ box-lines (mà tôi đã đưa vào ví dụ), cho phép các mục nằm trong nhiều hàng trái ngược với tràn.

Thông số mới được ghi vào phiên bản dev của một số trình duyệt, do đó, điều đó sẽ xảy ra. Nó chỉ là một vấn đề thời gian.

Trong thời gian chờ đợi, có lẽ một cái gì đó như Isotope có thể phù hợp với nhu cầu của bạn.

Nếu bạn muốn kiểm tra spec, bạn có thể tìm thấy nó ở đây: http://www.w3.org/TR/css3-flexbox/

Answer 3

Điều này có thể được giải quyết với plugin jquery nề. Đó là một chút giống như đồng vị nhưng miễn phí cho người dùng cá nhân và thương mại.